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
|
||||
[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
|
||||
[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]: https://daisyui.com/
|
||||
[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 = {
|
||||
components: "48",
|
||||
components: "49",
|
||||
themes: "29",
|
||||
githubStars: "+12,000",
|
||||
npmInstalls: "+1,000,000",
|
||||
githubStars: "+15,000",
|
||||
npmInstalls: "+2,000,000",
|
||||
}
|
||||
|
||||
export let siteData = {
|
||||
|
@ -391,6 +391,13 @@ export let pages = [
|
|||
icon: "",
|
||||
badge: "",
|
||||
},
|
||||
{
|
||||
name: "Chat bubble",
|
||||
tags: "chat bubble dialog message messenger",
|
||||
href: "/components/chat",
|
||||
icon: "",
|
||||
badge: "New",
|
||||
},
|
||||
{
|
||||
name: "Collapse",
|
||||
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