docs: add Mail example (#811)

Co-authored-by: Davis SHYAKA <[email protected]>
Co-authored-by: Hunter Johnston <[email protected]>

apps/www/src/lib/config/docs.ts

@@ -343,6 +343,11 @@ type Example = {
 	code: string;
 };
 export const examples: Example[] = [
+	{
+		name: "Mail",
+		href: "/examples/mail",
+		code: "https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/docs/mail",
+	},
 	{
 		name: "Dashboard",
 		href: "/examples/dashboard",

apps/www/src/routes/+page.server.ts

@@ -0,0 +1,14 @@
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async (event) => {
+	const layoutCookie = event.cookies.get("PaneForge:layout");
+	const collapsedCookie = event.cookies.get("PaneForge:collapsed");
+
+	let layout: number[] | undefined = undefined;
+	let collapsed: boolean | undefined = undefined;
+
+	layoutCookie && (layout = JSON.parse(layoutCookie));
+	collapsedCookie && (collapsed = JSON.parse(collapsedCookie));
+
+	return { layout, collapsed };
+};

apps/www/src/routes/+page.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
-	import { DashboardPage, ExamplesNav, Announcement } from "@/components/docs";
+	import { ExamplesNav, Announcement } from "@/components/docs";
 	import * as PageHeader from "@/components/docs/page-header";
 	import { Icons } from "@/components/docs/icons";
 	import { buttonVariants } from "@/registry/new-york/ui/button";
 	import { siteConfig } from "$lib/config/site";
 	import { cn } from "@/utils";
+	import Mail from "./examples/mail/(components)/mail.svelte";
+	import { accounts, mails } from "./examples/mail/data";
+
+	export let data;
 </script>
 
 <div class="container relative">
@@ -48,14 +52,14 @@
 		class="overflow-hidden rounded-lg border bg-background shadow-md md:hidden md:shadow-xl"
 	>
 		<img
-			src="/examples/dashboard-light.png"
+			src="/examples/mail-light.png"
 			width={1280}
 			height={727}
 			alt="Dashboard"
 			class="block dark:hidden"
 		/>
 		<img
-			src="/examples/dashboard-dark.png"
+			src="/examples/mail-dark.png"
 			width={1280}
 			height={727}
 			alt="Dashboard"
@@ -64,7 +68,13 @@
 	</section>
 	<section class="hidden md:block">
 		<div class="overflow-hidden rounded-lg border bg-background shadow-lg">
-			<DashboardPage />
+			<Mail
+				{accounts}
+				{mails}
+				defaultLayout={data.layout}
+				defaultCollapsed={data.collapsed}
+				navCollapsedSize={4}
+			/>
 		</div>
 	</section>
 </div>

apps/www/src/routes/examples/+page.ts

@@ -2,5 +2,5 @@ import type { PageLoad } from "./$types";
 import { redirect } from "@sveltejs/kit";
 
 export const load: PageLoad = async () => {
-	throw redirect(302, "/examples/dashboard");
+	throw redirect(302, "/examples/mail");
 };

apps/www/src/routes/examples/mail/(components)/account-switcher.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import * as Select from "@/registry/new-york/ui/select";
+	import { cn } from "@/utils";
+	import type { Account } from "../data.js";
+
+	export let isCollapsed: boolean;
+	export let accounts: Account[];
+
+	let selectedAccount = accounts[0];
+</script>
+
+<Select.Root
+	portal={null}
+	selected={{ value: selectedAccount.email, label: selectedAccount.label }}
+	onSelectedChange={(e) => {
+		selectedAccount = accounts.find((account) => account.email === e?.value) || accounts[0];
+	}}
+>
+	<Select.Trigger
+		class={cn(
+			"flex items-center gap-2 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0",
+			isCollapsed &&
+				"flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>div>svg]:hidden [&>span]:w-auto"
+		)}
+		aria-label="Select account"
+	>
+		<span class="pointer-events-none">
+			<svelte:component this={selectedAccount.icon} class={cn(isCollapsed ? "ml-2" : "")} />
+			<span class={cn(isCollapsed ? "!ml-0 !hidden" : "ml-2")}>
+				{selectedAccount.label}
+			</span>
+		</span>
+	</Select.Trigger>
+	<Select.Content sameWidth={!isCollapsed} align={isCollapsed ? "start" : undefined}>
+		<Select.Group>
+			{#each accounts as account}
+				<Select.Item value={account.email} label={account.label}>
+					<div
+						class="flex items-center gap-3 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 [&_svg]:text-foreground"
+					>
+						<svelte:component
+							this={account.icon}
+							aria-hidden="true"
+							class="size-4 shrink-0 text-foreground"
+						/>
+						{account.email}
+					</div>
+				</Select.Item>
+			{/each}
+		</Select.Group>
+	</Select.Content>
+	<Select.Input hidden name="account" />
+</Select.Root>

apps/www/src/routes/examples/mail/(components)/icons/gmail.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Icon } from "lucide-svelte";
+
+	type $$Props = Icon["$$prop_def"];
+	type $$Events = Icon["$$events_def"];
+	type $$Slots = Icon["$$slot_def"];
+</script>
+
+<svg role="img" viewBox="0 0 24 24" {...$$restProps} xmlns="http://www.w3.org/2000/svg">
+	<title>Gmail</title>
+	<path
+		d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"
+		fill="currentColor"
+	/>
+</svg>

apps/www/src/routes/examples/mail/(components)/icons/icloud.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Icon } from "lucide-svelte";
+
+	type $$Props = Icon["$$prop_def"];
+	type $$Events = Icon["$$events_def"];
+	type $$Slots = Icon["$$slot_def"];
+</script>
+
+<svg role="img" viewBox="0 0 24 24" {...$$restProps} xmlns="http://www.w3.org/2000/svg">
+	<title>iCloud</title>
+	<path
+		d="M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z"
+		fill="currentColor"
+	/>
+</svg>

apps/www/src/routes/examples/mail/(components)/icons/vercel.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { Icon } from "lucide-svelte";
+
+	type $$Props = Icon["$$prop_def"];
+	type $$Events = Icon["$$events_def"];
+	type $$Slots = Icon["$$slot_def"];
+</script>
+
+<svg role="img" viewBox="0 0 24 24" {...$$restProps} xmlns="http://www.w3.org/2000/svg">
+	<title>Vercel</title>
+	<path d="M24 22.525H0l12-21.05 12 21.05z" fill="currentColor" />
+</svg>