feat: Add new component `chat`
This commit is contained in:
parent
0d3f5520c8
commit
522bc5ebf4
|
@ -242,7 +242,7 @@ Tweet about daisyUI: [![][tweet]][tweet-url]
|
||||||
[jsdeliver-url]: https://www.jsdelivr.com/package/npm/daisyui
|
[jsdeliver-url]: https://www.jsdelivr.com/package/npm/daisyui
|
||||||
[build-url]: https://github.com/saadeghi/daisyui/actions
|
[build-url]: https://github.com/saadeghi/daisyui/actions
|
||||||
[tweet-url]: https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AComponents%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui
|
[tweet-url]: https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AComponents%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui
|
||||||
[number-of-components]: https://badgen.net/badge/total%20components/47/green
|
[number-of-components]: https://badgen.net/badge/total%20components/49/green
|
||||||
[docs-url-install]: https://daisyui.com/docs/install
|
[docs-url-install]: https://daisyui.com/docs/install
|
||||||
[docs-url]: https://daisyui.com/
|
[docs-url]: https://daisyui.com/
|
||||||
[logo-url]: https://raw.githubusercontent.com/saadeghi/files/main/daisyui/logo-4.svg
|
[logo-url]: https://raw.githubusercontent.com/saadeghi/files/main/daisyui/logo-4.svg
|
||||||
|
|
|
@ -1,115 +0,0 @@
|
||||||
.bubble {
|
|
||||||
/* default */
|
|
||||||
& {
|
|
||||||
--bubble-bg: hsl(var(--n));
|
|
||||||
@apply text-neutral-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* brand colors */
|
|
||||||
&-primary {
|
|
||||||
--bubble-bg: hsl(var(--p));
|
|
||||||
@apply text-primary-content;
|
|
||||||
}
|
|
||||||
&-secondary {
|
|
||||||
--bubble-bg: hsl(var(--s));
|
|
||||||
@apply text-secondary-content;
|
|
||||||
}
|
|
||||||
&-accent {
|
|
||||||
--bubble-bg: hsl(var(--a));
|
|
||||||
@apply text-accent-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* state colors */
|
|
||||||
&-info {
|
|
||||||
--bubble-bg: hsl(var(--in));
|
|
||||||
@apply text-info-content;
|
|
||||||
}
|
|
||||||
&-success {
|
|
||||||
--bubble-bg: hsl(var(--su));
|
|
||||||
@apply text-success-content;
|
|
||||||
}
|
|
||||||
&-warning {
|
|
||||||
--bubble-bg: hsl(var(--wa));
|
|
||||||
@apply text-warning-content;
|
|
||||||
}
|
|
||||||
&-error {
|
|
||||||
--bubble-bg: hsl(var(--er));
|
|
||||||
@apply text-error-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-left {
|
|
||||||
[dir="ltr"] & {
|
|
||||||
@apply mr-auto rounded-r-xl;
|
|
||||||
margin-left: var(--bubble-radius, 0.75rem);
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
--circle-pos: top left;
|
|
||||||
left: calc(var(--bubble-radius, 0.75rem) * -1);
|
|
||||||
background-image: var(--tab-corner-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
[dir="rtl"] & {
|
|
||||||
@apply ml-auto rounded-l-xl;
|
|
||||||
margin-right: var(--bubble-radius, 0.75rem);
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
--circle-pos: top right;
|
|
||||||
right: calc(var(--bubble-radius, 0.75rem) * -1);
|
|
||||||
background-image: var(--tab-corner-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-right {
|
|
||||||
[dir="ltr"] & {
|
|
||||||
@apply ml-auto rounded-l-xl;
|
|
||||||
margin-right: var(--bubble-radius, 0.75rem);
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
right: calc(var(--bubble-radius, 0.75rem) * -1);
|
|
||||||
--circle-pos: top right;
|
|
||||||
background-image: var(--tab-corner-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
[dir="rtl"] & {
|
|
||||||
@apply mr-auto rounded-r-xl;
|
|
||||||
margin-left: var(--bubble-radius, 0.75rem);
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
left: calc(var(--bubble-radius, 0.75rem) * -1);
|
|
||||||
--circle-pos: top left;
|
|
||||||
background-image: var(--tab-corner-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-topbar {
|
|
||||||
@apply flex items-center;
|
|
||||||
@apply mb-1;
|
|
||||||
|
|
||||||
&-author {
|
|
||||||
@apply font-medium;
|
|
||||||
}
|
|
||||||
&-time {
|
|
||||||
@apply text-xs italic;
|
|
||||||
@apply mx-2;
|
|
||||||
}
|
|
||||||
&-action {
|
|
||||||
[dir="ltr"] & {
|
|
||||||
@apply ml-auto;
|
|
||||||
}
|
|
||||||
[dir="rtl"] & {
|
|
||||||
@apply mr-auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-action {
|
|
||||||
[dir="ltr"] & {
|
|
||||||
@apply ml-auto;
|
|
||||||
}
|
|
||||||
[dir="rtl"] & {
|
|
||||||
@apply mr-auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -0,0 +1,51 @@
|
||||||
|
.chat {
|
||||||
|
&-bubble {
|
||||||
|
@apply rounded-box;
|
||||||
|
min-height: 2.75rem;
|
||||||
|
min-width: 2.75rem;
|
||||||
|
|
||||||
|
/* default */
|
||||||
|
& {
|
||||||
|
@apply bg-neutral text-neutral-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* brand colors */
|
||||||
|
&-primary {
|
||||||
|
@apply bg-primary text-primary-content;
|
||||||
|
}
|
||||||
|
&-secondary {
|
||||||
|
@apply bg-secondary text-secondary-content;
|
||||||
|
}
|
||||||
|
&-accent {
|
||||||
|
@apply bg-accent text-accent-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* state colors */
|
||||||
|
&-info {
|
||||||
|
@apply bg-info text-info-content;
|
||||||
|
}
|
||||||
|
&-success {
|
||||||
|
@apply bg-success text-success-content;
|
||||||
|
}
|
||||||
|
&-warning {
|
||||||
|
@apply bg-warning text-warning-content;
|
||||||
|
}
|
||||||
|
&-error {
|
||||||
|
@apply bg-error text-error-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-start .chat-bubble {
|
||||||
|
@apply rounded-bl-none;
|
||||||
|
&:before {
|
||||||
|
left: -0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-end .chat-bubble {
|
||||||
|
@apply rounded-br-none;
|
||||||
|
&:before {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,19 +0,0 @@
|
||||||
.bubble {
|
|
||||||
--bubble-radius: 0.75rem;
|
|
||||||
|
|
||||||
@apply inline-block;
|
|
||||||
@apply px-4 py-2 my-2 rounded-t-xl relative;
|
|
||||||
@apply font-light;
|
|
||||||
background-color: var(--bubble-bg);
|
|
||||||
max-width: 60%;
|
|
||||||
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: var(--bubble-radius, 0.75rem);
|
|
||||||
height: var(--bubble-radius, 0.75rem);
|
|
||||||
bottom: 0;
|
|
||||||
--tab-corner-bg: radial-gradient(circle at var(--circle-pos), transparent 68%, transparent 68%, transparent calc(68% + 1px), var(--bubble-bg) 68%);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -0,0 +1,62 @@
|
||||||
|
.chat {
|
||||||
|
@apply grid grid-cols-2 gap-x-3 py-1;
|
||||||
|
&-image {
|
||||||
|
@apply self-end row-span-2;
|
||||||
|
}
|
||||||
|
&-header {
|
||||||
|
@apply text-sm row-start-1;
|
||||||
|
}
|
||||||
|
&-footer {
|
||||||
|
@apply text-sm row-start-3;
|
||||||
|
}
|
||||||
|
&-bubble {
|
||||||
|
@apply block w-fit px-4 py-2 relative;
|
||||||
|
max-width: 90%;
|
||||||
|
&:before {
|
||||||
|
@apply w-3 h-3 absolute bottom-0;
|
||||||
|
background-color: inherit;
|
||||||
|
content: "";
|
||||||
|
mask-size: contain;
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
mask-position: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-start {
|
||||||
|
@apply place-items-start;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
.chat-header {
|
||||||
|
@apply col-start-2;
|
||||||
|
}
|
||||||
|
.chat-footer {
|
||||||
|
@apply col-start-2;
|
||||||
|
}
|
||||||
|
.chat-image {
|
||||||
|
@apply col-start-1;
|
||||||
|
}
|
||||||
|
.chat-bubble {
|
||||||
|
@apply col-start-2;
|
||||||
|
&:before {
|
||||||
|
mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-end {
|
||||||
|
@apply place-items-end;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
.chat-header {
|
||||||
|
@apply col-start-1;
|
||||||
|
}
|
||||||
|
.chat-footer {
|
||||||
|
@apply col-start-1;
|
||||||
|
}
|
||||||
|
.chat-image {
|
||||||
|
@apply col-start-2;
|
||||||
|
}
|
||||||
|
.chat-bubble {
|
||||||
|
@apply col-start-1;
|
||||||
|
&:before {
|
||||||
|
mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,8 +1,8 @@
|
||||||
export let siteStats = {
|
export let siteStats = {
|
||||||
components: "48",
|
components: "49",
|
||||||
themes: "29",
|
themes: "29",
|
||||||
githubStars: "+12,000",
|
githubStars: "+15,000",
|
||||||
npmInstalls: "+1,000,000",
|
npmInstalls: "+2,000,000",
|
||||||
}
|
}
|
||||||
|
|
||||||
export let siteData = {
|
export let siteData = {
|
||||||
|
@ -391,6 +391,13 @@ export let pages = [
|
||||||
icon: "",
|
icon: "",
|
||||||
badge: "",
|
badge: "",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "Chat bubble",
|
||||||
|
tags: "chat bubble dialog message messenger",
|
||||||
|
href: "/components/chat",
|
||||||
|
icon: "",
|
||||||
|
badge: "New",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "Collapse",
|
name: "Collapse",
|
||||||
tags: "collapse accordion",
|
tags: "collapse accordion",
|
||||||
|
|
|
@ -1,270 +0,0 @@
|
||||||
---
|
|
||||||
title: Chat bubble
|
|
||||||
desc: It's a awesome chat bubble!
|
|
||||||
published: true
|
|
||||||
---
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Component from "@components/Component.svelte"
|
|
||||||
import ClassTable from "@components/ClassTable.svelte"
|
|
||||||
import { prefix } from '$lib/stores';
|
|
||||||
import { replace } from '$lib/actions';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<ClassTable
|
|
||||||
data="{[
|
|
||||||
{ type:'component', class: 'bubble', desc: 'Bubble' },
|
|
||||||
{ type:'modifier', class: 'bubble-primary', desc: 'Bubble with `secondary` background' },
|
|
||||||
{ type:'modifier', class: 'bubble-secondary', desc: 'Bubble with `secondary` background' },
|
|
||||||
{ type:'modifier', class: 'bubble-accent', desc: 'Bubble with `accent` background' },
|
|
||||||
{ type:'modifier', class: 'bubble-info', desc: 'Bubble with `info` background' },
|
|
||||||
{ type:'modifier', class: 'bubble-success', desc: 'Bubble with `success` background' },
|
|
||||||
{ type:'modifier', class: 'bubble-warning', desc: 'Bubble with `warning` background' },
|
|
||||||
{ type:'modifier', class: 'bubble-error', desc: 'Bubble with `error` background' },
|
|
||||||
{ type:'modifier', class: 'bubble-left', desc: 'Left side bubble' },
|
|
||||||
{ type:'modifier', class: 'bubble-right', desc: 'Right side bubble' },
|
|
||||||
{ type:'modifier', class: 'bubble-topbar-author', desc: 'Showing author name' },
|
|
||||||
{ type:'modifier', class: 'bubble-topbar-time', desc: 'Showing message time' },
|
|
||||||
{ type:'modifier', class: 'bubble-topbar-action', desc: 'Using for more actions' },
|
|
||||||
]}"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="alert alert-info text-sm">
|
|
||||||
<div>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info-content flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
||||||
Using dir="ltr" or dir="rtl" is required.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Component title="Chat Bubble">
|
|
||||||
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
|
||||||
<div class="bubble bubble-left">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
<div class="bubble bubble-right">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
</div>
|
|
||||||
<pre slot="html" use:replace={{ to: $prefix }}>{
|
|
||||||
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
|
||||||
<div class="$$bubble $$bubble-left">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
<div class="$$bubble $$bubble-right">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
</div>`
|
|
||||||
}</pre>
|
|
||||||
</Component>
|
|
||||||
|
|
||||||
<Component title="Chat Bubble with brand colors">
|
|
||||||
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
|
||||||
<div class="bubble bubble-left bubble-primary">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
<div class="bubble bubble-right bubble-secondary">Thank you 😊<br/> see you soon 👋</div>
|
|
||||||
<div class="bubble bubble-left bubble-accent">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
</div>
|
|
||||||
<pre slot="html" use:replace={{ to: $prefix }}>{
|
|
||||||
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
|
||||||
<div class="$$bubble $$bubble-left $$bubble-primary">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
<div class="$$bubble $$bubble-right $$bubble-secondary">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
<div class="$$bubble $$bubble-left $$bubble-accent">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
</div>`
|
|
||||||
}</pre>
|
|
||||||
</Component>
|
|
||||||
|
|
||||||
<Component title="Chat Bubble with state colors">
|
|
||||||
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
|
||||||
<div class="bubble bubble-left bubble-info">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
<div class="bubble bubble-right bubble-success">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
<div class="bubble bubble-left bubble-warning">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
<div class="bubble bubble-right bubble-error">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
</div>
|
|
||||||
<pre slot="html" use:replace={{ to: $prefix }}>{
|
|
||||||
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
|
||||||
<div class="$$bubble $$bubble-left $$bubble-info">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
<div class="$$bubble $$bubble-right $$bubble-success">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
<div class="$$bubble $$bubble-left $$bubble-warning">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
<div class="$$bubble $$bubble-right $$bubble-error">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
</div>`
|
|
||||||
}</pre>
|
|
||||||
</Component>
|
|
||||||
|
|
||||||
<Component title="Chat Bubble with author">
|
|
||||||
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
|
||||||
<div class="bubble bubble-left">
|
|
||||||
<div class="bubble-topbar">
|
|
||||||
<div class="bubble-topbar-author">Iman</div>
|
|
||||||
</div>
|
|
||||||
Thank you 😊<br/> See you soon 👋
|
|
||||||
</div>
|
|
||||||
<div class="bubble bubble-right">
|
|
||||||
<div class="bubble-topbar">
|
|
||||||
<div class="bubble-topbar-author">Amin</div>
|
|
||||||
</div>
|
|
||||||
Thank you 😊<br/> See you soon 👋
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<pre slot="html" use:replace={{ to: $prefix }}>{
|
|
||||||
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
|
||||||
<div class="$$bubble $$bubble-left">
|
|
||||||
<div class="$$bubble-topbar">
|
|
||||||
<div class="$$bubble-topbar-author">Iman</div>
|
|
||||||
</div>
|
|
||||||
Thank you 😊<br/> See you soon 👋
|
|
||||||
</div>
|
|
||||||
<div class="$$bubble $$bubble-right">
|
|
||||||
<div class="$$bubble-topbar">
|
|
||||||
<div class="$$bubble-topbar-author">Amin</div>
|
|
||||||
</div>
|
|
||||||
Thank you 😊<br/> See you soon 👋
|
|
||||||
</div>
|
|
||||||
</div>`
|
|
||||||
}</pre>
|
|
||||||
</Component>
|
|
||||||
|
|
||||||
<Component title="Chat Bubble with time">
|
|
||||||
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
|
||||||
<div class="bubble bubble-left">
|
|
||||||
<div class="bubble-topbar">
|
|
||||||
<div class="bubble-topbar-author">Iman</div>
|
|
||||||
<div class="bubble-topbar-time">1 min</div>
|
|
||||||
</div>
|
|
||||||
Thank you 😊<br/> See you soon 👋
|
|
||||||
</div>
|
|
||||||
<div class="bubble bubble-right">
|
|
||||||
<div class="bubble-topbar">
|
|
||||||
<div class="bubble-topbar-author">Amin</div>
|
|
||||||
<div class="bubble-topbar-time">30 sec</div>
|
|
||||||
</div>
|
|
||||||
Thank you 😊<br/> See you soon 👋
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<pre slot="html" use:replace={{ to: $prefix }}>{
|
|
||||||
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
|
||||||
<div class="$$bubble $$bubble-left">
|
|
||||||
<div class="$$bubble-topbar">
|
|
||||||
<div class="$$bubble-topbar-author">Iman</div>
|
|
||||||
<div class="$$bubble-topbar-time">1 min</div>
|
|
||||||
</div>
|
|
||||||
Thank you 😊<br/> See you soon 👋
|
|
||||||
</div>
|
|
||||||
<div class="$$bubble $$bubble-right">
|
|
||||||
<div class="$$bubble-topbar">
|
|
||||||
<div class="$$bubble-topbar-author">Amin</div>
|
|
||||||
<div class="$$bubble-topbar-time">30 sec</div>
|
|
||||||
</div>
|
|
||||||
Thank you 😊<br/> See you soon 👋
|
|
||||||
</div>
|
|
||||||
</div>`
|
|
||||||
}</pre>
|
|
||||||
</Component>
|
|
||||||
|
|
||||||
<Component title="Chat Bubble with action">
|
|
||||||
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
|
||||||
<div class="bubble bubble-left">
|
|
||||||
<div class="bubble-topbar">
|
|
||||||
<div class="bubble-topbar-author">Iman</div>
|
|
||||||
<div class="bubble-topbar-time">1 min</div>
|
|
||||||
<div class="bubble-topbar-action">
|
|
||||||
<div class="dropdown">
|
|
||||||
<label
|
|
||||||
tabindex="0"
|
|
||||||
class="btn btn-circle btn-ghost btn-xs text-base"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
|
|
||||||
</label>
|
|
||||||
<ul
|
|
||||||
tabindex="0"
|
|
||||||
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40 text-neutral"
|
|
||||||
>
|
|
||||||
<li><a>Reply</a></li>
|
|
||||||
<li><a>Forward</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Thank you 😊<br/> See you soon 👋
|
|
||||||
</div>
|
|
||||||
<div class="bubble bubble-right">
|
|
||||||
<div class="bubble-topbar">
|
|
||||||
<div class="bubble-topbar-author">Amin</div>
|
|
||||||
<div class="bubble-topbar-time">30 sec</div>
|
|
||||||
<div class="bubble-topbar-action">
|
|
||||||
<div class="dropdown dropdown-end">
|
|
||||||
<label
|
|
||||||
tabindex="0"
|
|
||||||
class="btn btn-circle btn-ghost btn-xs text-base"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
|
|
||||||
</label>
|
|
||||||
<ul
|
|
||||||
tabindex="0"
|
|
||||||
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40 text-neutral"
|
|
||||||
>
|
|
||||||
<li><a>Reply</a></li>
|
|
||||||
<li><a>Forward</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Thank you 😊<br/> See you soon 👋
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<pre slot="html" use:replace={{ to: $prefix }}>{
|
|
||||||
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
|
||||||
<div class="$$bubble $$bubble-left">
|
|
||||||
<div class="$$bubble-topbar">
|
|
||||||
<div class="$$bubble-topbar-author">Iman</div>
|
|
||||||
<div class="$$bubble-topbar-time">1 min</div>
|
|
||||||
<div class="$$bubble-topbar-action">
|
|
||||||
<div class="dropdown">
|
|
||||||
<label
|
|
||||||
tabindex="0"
|
|
||||||
class="btn btn-circle btn-ghost btn-xs text-base"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
|
|
||||||
</label>
|
|
||||||
<ul
|
|
||||||
tabindex="0"
|
|
||||||
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40 text-neutral"
|
|
||||||
>
|
|
||||||
<li><a>Reply</a></li>
|
|
||||||
<li><a>Forward</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Thank you 😊<br/> See you soon 👋
|
|
||||||
</div>
|
|
||||||
<div class="$$bubble $$bubble-right">
|
|
||||||
<div class="$$bubble-topbar">
|
|
||||||
<div class="$$bubble-topbar-author">Amin</div>
|
|
||||||
<div class="$$bubble-topbar-time">30 sec</div>
|
|
||||||
<div class="$$bubble-topbar-action">
|
|
||||||
<div class="dropdown dropdown-end">
|
|
||||||
<label
|
|
||||||
tabindex="0"
|
|
||||||
class="btn btn-circle btn-ghost btn-xs text-base"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
|
|
||||||
</label>
|
|
||||||
<ul
|
|
||||||
tabindex="0"
|
|
||||||
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40 text-neutral"
|
|
||||||
>
|
|
||||||
<li><a>Reply</a></li>
|
|
||||||
<li><a>Forward</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Thank you 😊<br/> See you soon 👋
|
|
||||||
</div>
|
|
||||||
</div>`
|
|
||||||
}</pre>
|
|
||||||
</Component>
|
|
||||||
|
|
||||||
<Component title="Chat Bubble RTL">
|
|
||||||
<div dir="rtl" class="container mx-auto py-4 flex flex-col">
|
|
||||||
<div class="bubble bubble-left">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
<div class="bubble bubble-right">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
</div>
|
|
||||||
<pre slot="html" use:replace={{ to: $prefix }}>{
|
|
||||||
`<div dir="rtl" class="container mx-auto py-4 flex flex-col">
|
|
||||||
<div class="$$bubble $$bubble-left">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
<div class="$$bubble $$bubble-right">Thank you 😊<br/> See you soon 👋</div>
|
|
||||||
</div>`
|
|
||||||
}</pre>
|
|
||||||
</Component>
|
|
|
@ -0,0 +1,389 @@
|
||||||
|
---
|
||||||
|
title: Chat bubble
|
||||||
|
desc: Chat bubbles are used to show one line of conversation and all its data, including the author image, author name, time, etc.
|
||||||
|
published: true
|
||||||
|
---
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Component from "@components/Component.svelte"
|
||||||
|
import ClassTable from "@components/ClassTable.svelte"
|
||||||
|
import { prefix } from '$lib/stores';
|
||||||
|
import { replace } from '$lib/actions';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ClassTable
|
||||||
|
data="{[
|
||||||
|
{ type:'component', class: 'chat', desc: 'Container for one line of conversation and all its data' },
|
||||||
|
{ type:'modifier', class: 'chat-start', desc: 'Aligns `chat` to left (required)' },
|
||||||
|
{ type:'modifier', class: 'chat-end', desc: 'Aligns `chat` to end (required)' },
|
||||||
|
{ type:'component', class: 'chat-image', desc: 'For the author image' },
|
||||||
|
{ type:'component', class: 'chat-header', desc: 'For the line above the chat bubble' },
|
||||||
|
{ type:'component', class: 'chat-footer', desc: 'For the line below the chat bubble' },
|
||||||
|
{ type:'component', class: 'chat-bubble', desc: 'For the content of chat' },
|
||||||
|
{ type:'modifier', class: 'chat-bubble-primary', desc: 'sets `secondary` color for the `chat-bubble`' },
|
||||||
|
{ type:'modifier', class: 'chat-bubble-secondary', desc: 'sets `secondary` color for the `chat-bubble`' },
|
||||||
|
{ type:'modifier', class: 'chat-bubble-accent', desc: 'sets `accent` color for the `chat-bubble`' },
|
||||||
|
{ type:'modifier', class: 'chat-bubble-info', desc: 'sets `info` color for the `chat-bubble`' },
|
||||||
|
{ type:'modifier', class: 'chat-bubble-success', desc: 'sets `success` color for the `chat-bubble`' },
|
||||||
|
{ type:'modifier', class: 'chat-bubble-warning', desc: 'sets `warning` color for the `chat-bubble`' },
|
||||||
|
{ type:'modifier', class: 'chat-bubble-error', desc: 'sets `error` color for the `chat-bubble`' },
|
||||||
|
]}"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Component title="chat-start and chat-end">
|
||||||
|
<div class="w-full">
|
||||||
|
<div class="chat chat-start">
|
||||||
|
<div class="chat-bubble">It's over Anakin, <br/>I have the high ground.</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat chat-end">
|
||||||
|
<div class="chat-bubble">You underestimate my power!</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<pre slot="html" use:replace={{ to: $prefix }}>{
|
||||||
|
`<div class="$$chat $$chat-start">
|
||||||
|
<div class="$$chat-bubble">It's over Anakin, <br/>I have the high ground.</div>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat $$chat-end">
|
||||||
|
<div class="$$chat-bubble">You underestimate my power!</div>
|
||||||
|
</div>`
|
||||||
|
}</pre>
|
||||||
|
<pre slot="react" use:replace={{ to: $prefix }}>{
|
||||||
|
`<div className="$$chat $$chat-start">
|
||||||
|
<div className="$$chat-bubble">It's over Anakin, <br/>I have the high ground.</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat $$chat-end">
|
||||||
|
<div className="$$chat-bubble">You underestimate my power!</div>
|
||||||
|
</div>`
|
||||||
|
}</pre>
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component title="Chat with image">
|
||||||
|
<div class="w-full">
|
||||||
|
<div class="chat chat-start">
|
||||||
|
<div class="chat-image avatar">
|
||||||
|
<div class="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-bubble">It was said that you would, destroy the Sith, not join them.</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat chat-start">
|
||||||
|
<div class="chat-image avatar">
|
||||||
|
<div class="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-bubble">It was you who would bring balance to the Force</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat chat-start">
|
||||||
|
<div class="chat-image avatar">
|
||||||
|
<div class="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-bubble">Not leave it in Darkness</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<pre slot="html" use:replace={{ to: $prefix }}>{
|
||||||
|
`<div class="$$chat $$chat-start">
|
||||||
|
<div class="$$chat-image $$avatar">
|
||||||
|
<div class="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat-bubble">It was said that you would, destroy the Sith, not join them.</div>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat $$chat-start">
|
||||||
|
<div class="$$chat-image $$avatar">
|
||||||
|
<div class="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat-bubble">It was you who would bring balance to the Force</div>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat $$chat-start">
|
||||||
|
<div class="$$chat-image $$avatar">
|
||||||
|
<div class="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat-bubble">Not leave it in Darkness</div>
|
||||||
|
</div>`
|
||||||
|
}</pre>
|
||||||
|
<pre slot="react" use:replace={{ to: $prefix }}>{
|
||||||
|
`<div className="$$chat $$chat-start">
|
||||||
|
<div className="$$chat-image $$avatar">
|
||||||
|
<div className="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat-bubble">It was said that you would, destroy the Sith, not join them.</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat $$chat-start">
|
||||||
|
<div className="$$chat-image $$avatar">
|
||||||
|
<div className="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat-bubble">It was you who would bring balance to the Force</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat $$chat-start">
|
||||||
|
<div className="$$chat-image $$avatar">
|
||||||
|
<div className="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat-bubble">Not leave it in Darkness</div>
|
||||||
|
</div>`
|
||||||
|
}</pre>
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component title="Chat with image, header and footer">
|
||||||
|
<div class="w-full">
|
||||||
|
<div class="chat chat-start">
|
||||||
|
<div class="chat-image avatar">
|
||||||
|
<div class="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-header">
|
||||||
|
Obi-Wan Kenobi
|
||||||
|
<time class="text-xs opacity-50">12:45</time>
|
||||||
|
</div>
|
||||||
|
<div class="chat-bubble">You were the Chosen One!</div>
|
||||||
|
<div class="chat-footer opacity-50">
|
||||||
|
Delivered
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat chat-end">
|
||||||
|
<div class="chat-image avatar">
|
||||||
|
<div class="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-header">
|
||||||
|
Anakin
|
||||||
|
<time class="text-xs opacity-50">12:46</time>
|
||||||
|
</div>
|
||||||
|
<div class="chat-bubble">I hate you!</div>
|
||||||
|
<div class="chat-footer opacity-50">
|
||||||
|
Seen at 12:46
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<pre slot="html" use:replace={{ to: $prefix }}>{
|
||||||
|
`<div class="$$chat $$chat-start">
|
||||||
|
<div class="$$chat-image avatar">
|
||||||
|
<div class="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat-header">
|
||||||
|
Obi-Wan Kenobi
|
||||||
|
<time class="text-xs opacity-50">12:45</time>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat-bubble">You were the Chosen One!</div>
|
||||||
|
<div class="$$chat-footer opacity-50">
|
||||||
|
Delivered
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat $$chat-end">
|
||||||
|
<div class="$$chat-image avatar">
|
||||||
|
<div class="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat-header">
|
||||||
|
Anakin
|
||||||
|
<time class="text-xs opacity-50">12:46</time>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat-bubble">I hate you!</div>
|
||||||
|
<div class="$$chat-footer opacity-50">
|
||||||
|
Seen at 12:46
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
}</pre>
|
||||||
|
<pre slot="react" use:replace={{ to: $prefix }}>{
|
||||||
|
`<div className="$$chat $$chat-start">
|
||||||
|
<div className="$$chat-image avatar">
|
||||||
|
<div className="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat-header">
|
||||||
|
Obi-Wan Kenobi
|
||||||
|
<time className="text-xs opacity-50">12:45</time>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat-bubble">You were the Chosen One!</div>
|
||||||
|
<div className="$$chat-footer opacity-50">
|
||||||
|
Delivered
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat $$chat-end">
|
||||||
|
<div className="$$chat-image avatar">
|
||||||
|
<div className="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat-header">
|
||||||
|
Anakin
|
||||||
|
<time className="text-xs opacity-50">12:46</time>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat-bubble">I hate you!</div>
|
||||||
|
<div className="$$chat-footer opacity-50">
|
||||||
|
Seen at 12:46
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
}</pre>
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component title="Chat with header and footer">
|
||||||
|
<div class="w-full">
|
||||||
|
<div class="chat chat-start">
|
||||||
|
<div class="chat-header">
|
||||||
|
Obi-Wan Kenobi
|
||||||
|
<time class="text-xs opacity-50">2 hours ago</time>
|
||||||
|
</div>
|
||||||
|
<div class="chat-bubble">You were my brother, Anakin.</div>
|
||||||
|
<div class="chat-footer opacity-50">
|
||||||
|
Seen
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat chat-start">
|
||||||
|
<div class="chat-header">
|
||||||
|
Obi-Wan Kenobi
|
||||||
|
<time class="text-xs opacity-50">2 hour ago</time>
|
||||||
|
</div>
|
||||||
|
<div class="chat-bubble">I loved you.</div>
|
||||||
|
<div class="chat-footer opacity-50">
|
||||||
|
Delivered
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<pre slot="html" use:replace={{ to: $prefix }}>{
|
||||||
|
`<div class="$$chat $$chat-start">
|
||||||
|
<div class="$$chat-header">
|
||||||
|
Obi-Wan Kenobi
|
||||||
|
<time class="text-xs opacity-50">2 hours ago</time>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat-bubble">You were the Chosen One!</div>
|
||||||
|
<div class="$$chat-footer opacity-50">
|
||||||
|
Seen
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat $$chat-start">
|
||||||
|
<div class="$$chat-header">
|
||||||
|
Obi-Wan Kenobi
|
||||||
|
<time class="text-xs opacity-50">2 hour ago</time>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat-bubble">I loved you.</div>
|
||||||
|
<div class="$$chat-footer opacity-50">
|
||||||
|
Delivered
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
}</pre>
|
||||||
|
<pre slot="react" use:replace={{ to: $prefix }}>{
|
||||||
|
`<div className="$$chat $$chat-start">
|
||||||
|
<div className="$$chat-image avatar">
|
||||||
|
<div className="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat-header">
|
||||||
|
Obi-Wan Kenobi
|
||||||
|
<time className="text-xs opacity-50">2 hours ago</time>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat-bubble">You were the Chosen One!</div>
|
||||||
|
<div className="$$chat-footer opacity-50">
|
||||||
|
Seen
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat $$chat-start">
|
||||||
|
<div className="$$chat-image avatar">
|
||||||
|
<div className="w-10 rounded-full">
|
||||||
|
<img src="https://placeimg.com/192/192/people" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat-header">
|
||||||
|
Obi-Wan Kenobi
|
||||||
|
<time className="text-xs opacity-50">2 hour ago</time>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat-bubble">I loved you.</div>
|
||||||
|
<div className="$$chat-footer opacity-50">
|
||||||
|
Delivered
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
}</pre>
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component title="Chat Bubble with colors">
|
||||||
|
<div class="w-full">
|
||||||
|
<div class="chat chat-start">
|
||||||
|
<div class="chat-bubble chat-bubble-primary">What kind of nonsense is this</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat chat-start">
|
||||||
|
<div class="chat-bubble chat-bubble-secondary">Put me on the Council and not make me a Master!??</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat chat-start">
|
||||||
|
<div class="chat-bubble chat-bubble-accent">That's never been done in the history of the Jedi. It's insulting!</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat chat-end">
|
||||||
|
<div class="chat-bubble chat-bubble-info">Calm down, Anakin.</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat chat-end">
|
||||||
|
<div class="chat-bubble chat-bubble-success">You have been given a great honor.</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat chat-end">
|
||||||
|
<div class="chat-bubble chat-bubble-warning">To be on the Council at your age.</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat chat-end">
|
||||||
|
<div class="chat-bubble chat-bubble-error">It's never happened before.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<pre slot="html" use:replace={{ to: $prefix }}>{
|
||||||
|
`<div class="$$chat $$chat-start">
|
||||||
|
<div class="$$chat-bubble $$chat-bubble-primary">What kind of nonsense is this</div>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat $$chat-start">
|
||||||
|
<div class="$$chat-bubble $$chat-bubble-secondary">Put me on the Council and not make me a Master!??</div>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat $$chat-start">
|
||||||
|
<div class="$$chat-bubble $$chat-bubble-accent">That's never been done in the history of the Jedi. It's insulting!</div>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat $$chat-end">
|
||||||
|
<div class="$$chat-bubble $$chat-bubble-info">Calm down, Anakin.</div>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat $$chat-end">
|
||||||
|
<div class="$$chat-bubble $$chat-bubble-success">You have been given a great honor.</div>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat $$chat-end">
|
||||||
|
<div class="$$chat-bubble $$chat-bubble-warning">To be on the Council at your age.</div>
|
||||||
|
</div>
|
||||||
|
<div class="$$chat $$chat-end">
|
||||||
|
<div class="$$chat-bubble $$chat-bubble-error">It's never happened before.</div>
|
||||||
|
</div>`
|
||||||
|
}</pre>
|
||||||
|
<pre slot="react" use:replace={{ to: $prefix }}>{
|
||||||
|
`<div className="$$chat $$chat-start">
|
||||||
|
<div className="$$chat-bubble $$chat-bubble-primary">What kind of nonsense is this</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat $$chat-start">
|
||||||
|
<div className="$$chat-bubble $$chat-bubble-secondary">Put me on the Council and not make me a Master!??</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat $$chat-start">
|
||||||
|
<div className="$$chat-bubble $$chat-bubble-accent">That's never been done in the history of the Jedi. It's insulting!</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat $$chat-end">
|
||||||
|
<div className="$$chat-bubble $$chat-bubble-info">Calm down, Anakin.</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat $$chat-end">
|
||||||
|
<div className="$$chat-bubble $$chat-bubble-success">You have been given a great honor.</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat $$chat-end">
|
||||||
|
<div className="$$chat-bubble $$chat-bubble-warning">To be on the Council at your age.</div>
|
||||||
|
</div>
|
||||||
|
<div className="$$chat $$chat-end">
|
||||||
|
<div className="$$chat-bubble $$chat-bubble-error">It's never happened before.</div>
|
||||||
|
</div>`
|
||||||
|
}</pre>
|
||||||
|
</Component>
|
Loading…
Reference in New Issue