more redesign work (huntabyte#129)

tmarnet · Oct 21, 2023 · 4b00484 · 4b00484
1 parent a780302
commit 4b00484
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 65 deletions.
diff --git a/content/components/tabs.md b/content/components/tabs.md
@@ -3,6 +3,17 @@ title: Tabs
 description: Allows users to navigate between different views
 ---
 
+<script>
+	import { APISection, ComponentPreview, TabsDemo } from '@/components'
+	export let schemas;
+</script>
+
+<ComponentPreview name="tabs-demo" comp="Tabs">
+
+<TabsDemo slot="preview" />
+
+</ComponentPreview>
+
 ## Structure
 
 ```svelte

diff --git a/src/components/component-preview.svelte b/src/components/component-preview.svelte
@@ -8,25 +8,31 @@
 </script>
 
 {#if dev}
-	<div class={cn("group relative my-4 flex flex-col space-y-2", className)} {...$$restProps}>
+	<div
+		class={cn("group relative my-4 flex flex-col space-y-2", className)}
+		{...$$restProps}
+		data-preview
+	>
 		<Tabs.Root value="preview" class="relative mr-auto w-full">
-			<div class="flex items-center justify-between pb-3">
-				<Tabs.List class="w-full justify-start rounded-none border-b bg-transparent p-0">
+			<div class="flex items-center justify-between">
+				<Tabs.List
+					class="absolute w-full justify-end rounded-none bg-transparent p-0 z-20 top-5 right-4"
+				>
 					<Tabs.Trigger
 						value="preview"
-						class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+						class="relative h-9 rounded-lg bg-muted px-3 py-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:bg-background data-[state=active]:text-foreground hover:bg-primary/5 transition-all"
 					>
 						Preview
 					</Tabs.Trigger>
 					<Tabs.Trigger
 						value="code"
-						class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+						class="relative h-9 rounded-lg bg-muted px-3 py-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:bg-background data-[state=active]:text-foreground hover:bg-primary/5 transition-all"
 					>
-						Code
+						&lt;Code/&gt;
 					</Tabs.Trigger>
 				</Tabs.List>
 			</div>
-			<Tabs.Content value="preview" class="relative rounded-md border">
+			<Tabs.Content value="preview" class="relative rounded-md bg-muted">
 				<div
 					class={cn(
 						"preview flex min-h-[350px] w-full justify-center p-10",

diff --git a/src/components/copy-code-button.svelte b/src/components/copy-code-button.svelte
@@ -14,6 +14,7 @@
 	)}
 	on:click={copyCode}
 	{...$$restProps}
+	data-copy-code
 >
 	<span class="sr-only">Copy</span>
 	{#if copied}

diff --git a/src/components/demos/tabs-demo.svelte b/src/components/demos/tabs-demo.svelte
@@ -1,60 +1,20 @@
 <script lang="ts">
-	import * as Tabs from "@/components/ui/tabs";
-	import * as Card from "@/components/ui/card";
-	import * as Button from "@/components/ui/button";
-	import * as Input from "@/components/ui/input";
-	import * as Label from "@/components/ui/label";
+	import * as Tabs from "$lib/bits/tabs";
 </script>
 
-<Tabs.Root value="account" class="w-[400px]">
-	<Tabs.List class="grid w-full grid-cols-2">
-		<Tabs.Trigger value="account">Account</Tabs.Trigger>
-		<Tabs.Trigger value="password">Password</Tabs.Trigger>
-	</Tabs.List>
-	<Tabs.Content value="account">
-		<Card.Root>
-			<Card.Header>
-				<Card.Title>Account</Card.Title>
-				<Card.Description>
-					Make changes to your account here. Click save when you're done.
-				</Card.Description>
-			</Card.Header>
-			<Card.Content class="space-y-2">
-				<div class="space-y-1">
-					<Label.Root for="name">Name</Label.Root>
-					<Input.Root id="name" value="Pedro Duarte" />
-				</div>
-				<div class="space-y-1">
-					<Label.Root for="username">Username</Label.Root>
-					<Input.Root id="username" value="@peduarte" />
-				</div>
-			</Card.Content>
-			<Card.Footer>
-				<Button.Root>Save changes</Button.Root>
-			</Card.Footer>
-		</Card.Root>
-	</Tabs.Content>
-	<Tabs.Content value="password">
-		<Card.Root>
-			<Card.Header>
-				<Card.Title>Password</Card.Title>
-				<Card.Description>
-					Change your password here. After saving, you'll be logged out.
-				</Card.Description>
-			</Card.Header>
-			<Card.Content class="space-y-2">
-				<div class="space-y-1">
-					<Label.Root for="current">Current password</Label.Root>
-					<Input.Root id="current" type="password" />
-				</div>
-				<div class="space-y-1">
-					<Label.Root for="new">New password</Label.Root>
-					<Input.Root id="new" type="password" />
-				</div>
-			</Card.Content>
-			<Card.Footer>
-				<Button.Root>Save password</Button.Root>
-			</Card.Footer>
-		</Card.Root>
-	</Tabs.Content>
-</Tabs.Root>
+<div class="bg-primary p-4 rounded-xl">
+	<Tabs.Root value="account" class="w-[400px]">
+		<Tabs.List
+			class="grid w-full grid-cols-2 bg-primary/5 rounded-lg p-1 border border-muted-foreground"
+		>
+			<Tabs.Trigger value="account" class="h-10 rounded-md data-[state=active]:bg-muted"
+				>Account</Tabs.Trigger
+			>
+			<Tabs.Trigger value="password" class="h-10 rounded-md data-[state=active]:bg-muted"
+				>Password</Tabs.Trigger
+			>
+		</Tabs.List>
+		<Tabs.Content value="account">Account</Tabs.Content>
+		<Tabs.Content value="password">Password</Tabs.Content>
+	</Tabs.Root>
+</div>
diff --git a/src/components/page-header/page-header-description.svelte b/src/components/page-header/page-header-description.svelte
@@ -5,7 +5,7 @@
 	export { className as class };
 </script>
 
-<p class={cn("text-xl font-medium text-foreground/40 mt-3", className)}>
+<p class={cn("text-xl font-semibold text-foreground/40 mt-4 tracking-tight", className)}>
 	<Balancer>
 		<slot />
 	</Balancer>

diff --git a/src/styles/markdown.postcss b/src/styles/markdown.postcss
@@ -59,6 +59,16 @@
 	}
 }
 
+[data-preview] {
+	& pre {
+		@apply mt-0 mb-0;
+	}
+
+	& [data-copy-code] {
+		@apply hidden;
+	}
+}
+
 [data-chars-id="ul"] {
 	@apply border-b border-border font-bold !important;
 }