Skip to content

Commit 7cf2ce2

Browse files
maxfriedmannmaxfriedmann
committed
Add new components and enhance installation page with dynamic tabs
1 parent de644b6 commit 7cf2ce2

File tree

7 files changed

+232
-113
lines changed

7 files changed

+232
-113
lines changed

‎src/lib/docs/ComponentPage.svelte‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<script lang="ts">
2+
import type { Snippet } from "svelte";
3+
import ComponentPageCard from "./ComponentPageCard.svelte";
4+
5+
let {
6+
title,
7+
description,
8+
demoComponent,
9+
features,
10+
props
11+
}: {
12+
title: string;
13+
description?: string;
14+
demoComponent?: Snippet;
15+
features?: Snippet;
16+
props?: Array<{
17+
name: string;
18+
type: string;
19+
default: string;
20+
description: string;
21+
}>;
22+
} = $props();
23+
</script>
24+
25+
<div class="flex flex-col gap-4">
26+
<div class="text-4xl tracking-wider">{title}</div>
27+
{#if description}
28+
<div>{description}</div>
29+
{/if}
30+
{#if demoComponent}
31+
<ComponentPageCard>
32+
{@render demoComponent()}
33+
</ComponentPageCard>
34+
{/if}
35+
{#if props}
36+
<div class="text-2xl tracking-wider mt-12">Props</div>
37+
<ComponentPageCard>
38+
<table class="table table-zebra">
39+
<thead>
40+
<tr>
41+
<th>Option</th>
42+
<th>Type</th>
43+
<th>Default</th>
44+
<th>Description</th>
45+
</tr>
46+
</thead>
47+
<tbody>
48+
{#each props as prop}
49+
<tr>
50+
<td>{prop.name}</td>
51+
<td>{prop.type}</td>
52+
<td>{prop.default}</td>
53+
<td>{prop.description}</td>
54+
</tr>
55+
{/each}
56+
</tbody>
57+
</table>
58+
</ComponentPageCard>
59+
{/if}
60+
{#if features}
61+
<div class="text-2xl tracking-wider mt-12">Features</div>
62+
{@render features()}
63+
{/if}
64+
</div>

‎src/lib/docs/ComponentPageCard.svelte‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div class="card card-bordered card-compact shadow-lg bg-white">
2+
<div class="card-body">
3+
<slot />
4+
</div>
5+
</div>

‎src/lib/docs/ComponentPageFeature.svelte‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script lang="ts">
2+
import type { Snippet } from "svelte";
3+
4+
let { title, description, children }: { title: string; description?: string; children: Snippet } =
5+
$props();
6+
</script>
7+
8+
<div class="flex flex-col gap-4">
9+
<div class="p-2">{title}</div>
10+
{#if description}
11+
<div>{description}</div>
12+
{/if}
13+
<div class="p-4">
14+
{@render children()}
15+
</div>
16+
</div>

‎src/lib/docs/ComponentSubHeader.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
let { title, description }: { title: string; description?: string } = $props();
33
</script>
44

5-
<div class="flex flex-col gap-4 mt-32 mb-4 p-4 rounded bg-gray-200">
5+
<div class="flex flex-col gap-4 p-4 rounded bg-gray-200">
66
<div class="text-xl tracking-wider">{title}</div>
77
{#if description}
88
<div>{description}</div>

‎src/lib/modules/chat/ChatWindow.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,15 @@
3939
</script>
4040

4141
<div class="w-full h-full overflow-hidden overflow-y-auto" use:scrollToBottom={messages}>
42-
{#each messages as message, i (message.id)}
42+
{#each messages as message, i}
4343
<div class="chat {message.senderId === meId ? 'chat-start' : 'chat-end'}">
4444
{#if showAvatars !== "never"}
4545
<div class="chat-image avatar">
4646
<div class="w-10 rounded-box">
4747
{#if showAvatars === "always" || (showAvatars === "change" && messages[i + 1]?.senderId !== message.senderId)}
4848
<img
49-
alt="Tailwind CSS chat bubble component"
50-
src={users.find((user) => user.id === message.senderId)?.avatarUrl}
49+
alt="Avatar"
50+
src={users?.find((user) => user.id === message.senderId)?.avatarUrl}
5151
/>
5252
{/if}
5353
</div>

‎src/routes/install/+page.svelte‎

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
import ComponentCode from "$lib/docs/ComponentCode.svelte";
33
import ComponentHeader from "$lib/docs/ComponentHeader.svelte";
44
import ComponentSubHeader from "$lib/docs/ComponentSubHeader.svelte";
5+
6+
let selectedTab = "Vanilla";
57
</script>
68

79
<ComponentHeader
@@ -41,21 +43,57 @@
4143
class="tab"
4244
aria-label="Vanilla"
4345
checked
46+
onchange={() => (selectedTab = "Vanilla")}
4447
/>
4548
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
4649
<pre>&lt;script type=&quot;module&quot; src=&quot;https://cdn.skypack.dev/@smallstack/svelte-ui&quot;&gt;&lt;/script&gt;
4750
&lt;sui-table&gt;&lt;/sui-table&gt;
4851
</pre>
4952
</div>
50-
<input type="radio" name="install-wc-tabs" role="tab" class="tab" aria-label="Angular" />
53+
<input
54+
type="radio"
55+
name="install-wc-tabs"
56+
role="tab"
57+
class="tab"
58+
aria-label="Angular"
59+
onchange={() => (selectedTab = "Angular")}
60+
/>
5161
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
52-
<pre>TBD</pre>
62+
{#if selectedTab === "Angular"}
63+
<iframe
64+
src="https://stackblitz.com/edit/sui-message-thread-wc-angular?file=src%2Fmain.ts"
65+
width="100%"
66+
height="600px"
67+
title="Chat Window as a custom element"
68+
></iframe>
69+
{/if}
5370
</div>
54-
<input type="radio" name="install-wc-tabs" role="tab" class="tab" aria-label="React" />
71+
<input
72+
type="radio"
73+
name="install-wc-tabs"
74+
role="tab"
75+
class="tab"
76+
aria-label="React"
77+
onchange={() => (selectedTab = "React")}
78+
/>
5579
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
56-
<pre>TBD</pre>
80+
{#if selectedTab === "React"}
81+
<iframe
82+
src="https://stackblitz.com/edit/sui-message-thread-wc-react?file=src%2FApp.jsx"
83+
width="100%"
84+
height="600px"
85+
title="Chat Window as a custom element"
86+
></iframe>
87+
{/if}
5788
</div>
58-
<input type="radio" name="install-wc-tabs" role="tab" class="tab" aria-label="Vue" />
89+
<input
90+
type="radio"
91+
name="install-wc-tabs"
92+
role="tab"
93+
class="tab"
94+
aria-label="Vue"
95+
onchange={() => (selectedTab = "Vue")}
96+
/>
5997
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
6098
<pre>TBD</pre>
6199
</div>

0 commit comments

Comments
 (0)