docs: redesign Tabs examples (#326)

Co-authored-by: Hunter Johnston <johnstonhuntera@gmail.com>
huntabyte · Feb 11, 2024 · 44cbc5c · 44cbc5c
1 parent bb7c5f2
commit 44cbc5c
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 91 deletions.
diff --git a/src/components/demos/tabs-demo.svelte b/src/components/demos/tabs-demo.svelte
@@ -1,119 +1,70 @@
 <script lang="ts">
-	import { Tabs, Label, Button } from "$lib";
-	import { LockKeyOpen } from "$icons/index.js";
+	import { Tabs } from "$lib";
+	import { Airplane } from "$icons/index.js";
 </script>
 
 <div class="pt-6">
 	<Tabs.Root
-		value="login"
-		class="w-[428px] rounded-card border border-muted bg-background p-6 shadow-card"
+		value="outbound"
+		class="w-[390px] rounded-card border border-muted bg-background p-3 shadow-card"
 	>
 		<Tabs.List
-			class="grid w-full grid-cols-2 gap-1 rounded-9px bg-dark-4 p-1 text-sm font-semibold leading-[0.01em] shadow-mini-inset"
+			class="grid w-full grid-cols-2 gap-1 rounded-9px bg-dark-10 p-1 text-sm font-semibold leading-[0.01em] shadow-mini-inset"
 		>
 			<Tabs.Trigger
-				value="login"
+				value="outbound"
 				class="h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
-				>Login</Tabs.Trigger
+				>Outbound</Tabs.Trigger
 			>
 			<Tabs.Trigger
-				value="register"
+				value="inbound"
 				class="h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
-				>Register</Tabs.Trigger
+				>Inbound</Tabs.Trigger
 			>
 		</Tabs.List>
-		<Tabs.Content value="login" class="pt-6">
-			<div class="flex flex-col">
-				<h4 class="text-[19px] font-semibold leading-none tracking-[-0.01em]">
-					Login to your account
-				</h4>
-				<p class="text-sm font-medium text-muted-foreground">to access all your data</p>
-			</div>
-			<div class="flex flex-col gap-4 pt-5 text-sm">
-				<div class="flex flex-col gap-1">
-					<Label.Root for="username" class="font-medium text-foreground">Username</Label.Root>
-					<input
-						type="text"
-						id="username"
-						placeholder="name@example.com"
-						class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 placeholder:text-foreground-alt/50"
-					/>
+		<Tabs.Content value="outbound" class="pt-3">
+			<div class="grid grid-cols-3 grid-rows-2 gap-0 p-4 pb-1">
+				<div class="text-left">
+					<h4 class="mb-2 text-[20px] font-semibold leading-none tracking-[-0.01em]">Prague</h4>
+					<p class="text-sm font-medium text-muted-foreground">06:05</p>
+				</div>
+				<div class="self-end text-center">
+					<p class="text-sm font-medium text-muted-foreground">3h 30m</p>
+				</div>
+				<div class="text-right">
+					<h4 class="mb-2 text-[20px] font-semibold leading-none tracking-[-0.01em]">Malaga</h4>
+					<p class="text-sm font-medium text-muted-foreground">06:05</p>
 				</div>
-				<div class="flex flex-col gap-1">
-					<Label.Root for="password" class="font-medium text-foreground">Password</Label.Root>
-					<div class="relative w-full">
-						<input
-							id="password"
-							class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 placeholder:text-foreground-alt/50"
-							placeholder="super_secret"
-							type="password"
-							autocomplete="off"
-						/>
-						<LockKeyOpen class="absolute right-4 top-[14px] size-[22px] text-dark/30" />
+				<div class="relative col-span-3">
+					<hr class="border-1 relative top-4 h-px border-dashed border-border-input" />
+
+					<div class="absolute left-1/2 -translate-x-1/2 bg-background p-1">
+						<Airplane class="size-6 rotate-90 text-muted-foreground" />
 					</div>
 				</div>
 			</div>
-			<Button.Root
-				class="hover:button-gradient mt-[22px] inline-flex h-input w-full items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini"
-			>
-				Login
-			</Button.Root>
 		</Tabs.Content>
-		<Tabs.Content value="register" class="pt-6">
-			<div class="flex flex-col">
-				<h4 class="text-[19px] font-semibold leading-none tracking-[-0.01em]">
-					Register for an account
-				</h4>
-				<p class="text-sm font-medium text-muted-foreground">to start using all our features</p>
-			</div>
-			<div class="flex flex-col gap-4 pt-5">
-				<div class="flex flex-col gap-1">
-					<Label.Root for="registerUsername" class="text-sm font-medium text-foreground">
-						Username
-					</Label.Root>
-					<input
-						type="text"
-						id="registerUsername"
-						placeholder="name@example.com"
-						class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 text-sm placeholder:text-foreground-alt/50"
-					/>
+		<Tabs.Content value="inbound" class="pt-3">
+			<div class="grid grid-cols-3 grid-rows-2 gap-0 p-4 pb-1">
+				<div class="text-left">
+					<h4 class="mb-2 text-[20px] font-semibold leading-none tracking-[-0.01em]">Malaga</h4>
+					<p class="text-sm font-medium text-muted-foreground">07:25</p>
 				</div>
-				<div class="flex flex-col gap-1">
-					<Label.Root for="registerPassword" class="text-sm font-medium text-foreground">
-						Password
-					</Label.Root>
-					<div class="relative w-full">
-						<input
-							id="registerPassword"
-							class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 text-sm placeholder:text-foreground-alt/50"
-							placeholder="super_secret"
-							type="password"
-							autocomplete="off"
-						/>
-						<LockKeyOpen class="absolute right-4 top-[14px] size-[22px] text-dark/30" />
-					</div>
+				<div class="self-end text-center">
+					<p class="text-sm font-medium text-muted-foreground">3h 20m</p>
+				</div>
+				<div class="text-right">
+					<h4 class="mb-2 text-[20px] font-semibold leading-none tracking-[-0.01em]">Prague</h4>
+					<p class="text-sm font-medium text-muted-foreground">10:45</p>
 				</div>
-				<div class="flex flex-col gap-1">
-					<Label.Root for="passwordConfirm" class="text-sm font-medium text-foreground">
-						Confirm Password
-					</Label.Root>
-					<div class="relative w-full">
-						<input
-							id="passwordConfirm"
-							class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 text-sm placeholder:text-foreground-alt/50"
-							placeholder="super_secret"
-							type="password"
-							autocomplete="off"
-						/>
-						<LockKeyOpen class="absolute right-4 top-[14px] size-[22px] text-dark/30" />
+				<div class="relative col-span-3">
+					<hr class="border-1 relative top-4 h-px border-dashed border-border-input" />
+
+					<div class="absolute left-1/2 -translate-x-1/2 bg-background p-1">
+						<Airplane class="size-6 rotate-90 text-muted-foreground" />
 					</div>
 				</div>
 			</div>
-			<Button.Root
-				class="hover:button-gradient mt-[22px] inline-flex h-input w-full items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini"
-			>
-				Login
-			</Button.Root>
 		</Tabs.Content>
 	</Tabs.Root>
 </div>
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
@@ -51,6 +51,7 @@ export { default as Sticker } from "phosphor-svelte/lib/Sticker";
 export { default as UserCircle } from "phosphor-svelte/lib/UserCircle";
 export { default as PlusCircle } from "phosphor-svelte/lib/PlusCircle";
 export { default as OrangeSlice } from "phosphor-svelte/lib/OrangeSlice";
+export { default as Airplane } from "phosphor-svelte/lib/Airplane";
 
 export type IconProps = Partial<HTMLAttributes<SVGElement>> & {
 	class?: string;