change layout for pages

willpinha · Feb 7, 2024 · 573f8e9 · 573f8e9
1 parent d974e64
commit 573f8e9
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 104 deletions.
diff --git a/src/components/AllTags.svelte b/src/components/AllTags.svelte
diff --git a/src/components/Filter.svelte b/src/components/Filter.svelte
@@ -8,7 +8,7 @@
     const numExamples = getNumberOfExamples();
 </script>
 
-<div class="flex flex-col items-center gap-6">
+<div class="flex flex-col items-center gap-8 px-4 py-8">
 	<h1 class="text-center gap-2 text-4xl font-bold">
 		Click on a <span class="text-primary">#tag</span> to show
 		<i class="text-secondary">UI examples</i>
@@ -18,7 +18,6 @@
 		🌸 You can find
 		<span class="badge badge-accent badge-outline badge-sm">{numExamples}</span> UI examples in
 		<span class="badge badge-accent badge-outline badge-sm">{tags.length}</span> tags!
-		<a href="/all" class="link link-accent">See all here</a>
 	</div>
 
 	<label for="filter" class="flex relative items-center">
@@ -30,7 +29,7 @@
 		<input id="filter" placeholder="Filter tags..." class="input input-bordered pl-12" bind:value={filter} />
 	</label>
 
-	<div class="flex flex-wrap justify-center gap-2 max-w-xl">
+	<div class="flex flex-wrap justify-center gap-2">
 		{#each tags as tag}
 			<a
 				href="/{tag}"

diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
@@ -1,17 +1,33 @@
-<script>
+<script lang="ts">
 	import themes from "../utils/themes";
+
+	export let tag: string | undefined = undefined;
 </script>
 
-<nav class="navbar bg-base-300 justify-between">
+<nav class="navbar bg-base-200 justify-between">
 	<!-- Left side -->
-	<a href="/" class="btn btn-ghost flex gap-2">
-		<img src="/logo.svg" class="w-4 sm:w-6" alt="Daisy Catalog" />
+	{#if tag}
+		<div class="flex gap-2">
+			<a href="/" class="btn btn-ghost px-3">
+				<span class="hidden">Get back</span>
+
+				<i class="fa-solid fa-arrow-left-long text-2xl"></i>
+			</a>
 
-		<div class="flex font-bold text-lg sm:text-2xl">
-			Daisy
-			<span class="text-primary">Collection</span>
+			<span class="text-xl text-primary font-bold">
+				#{tag}
+			</span>
 		</div>
-	</a>
+	{:else}
+		<a href="/" class="btn btn-ghost flex gap-2">
+			<img src="/logo.svg" class="w-4" alt="Daisy Catalog" />
+
+			<div class="flex font-bold text-lg">
+				Daisy
+				<span class="text-primary">Collection</span>
+			</div>
+		</a>
+	{/if}
 
 	<!-- Right side -->
 	<div class="flex gap-0 sm:gap-2">

diff --git a/src/components/Preview.svelte b/src/components/Preview.svelte
@@ -22,36 +22,32 @@
 	});
 </script>
 
-<li>
-	<div class="timeline-middle flex">
-		<i class="fa-regular fa-folder-open"></i>
-	</div>
+<div class="flex flex-col gap-2">
+	<div class="flex gap-2">
+		<i class="fa-solid fa-file"></i>
 
-	<div class="timeline-start w-full flex flex-col gap-4">
 		<span class="text-accent font-mono italic self-start">
 			{convertExampleName(example)}
-        </span>
-
-		<div role="tablist" class="tabs tabs-lifted pb-4">
-			<input
-				type="radio"
-				name="{example}"
-				role="tab"
-				class="tab"
-				aria-label="Preview"
-				checked
-			/>
-			<div bind:this={preview} role="tabpanel" class="flex tab-content border-base-300 rounded-box p-3 overflow-x-auto">
-				{@html html}
-			</div>
-
-            <a target="_blank" href="https://github.com/willpinha/daisy-collection/blob/master/src/examples/{tag}/{example}.html" class="tab">
-                Code
-            </a>
-
-            <a target="_blank" href="/playground/{tag}/{example}" class="tab">Playground</a>
-		</div>
+		</span>
 	</div>
 
-	<hr class="bg-base-200"/>
-</li>
+	<div role="tablist" class="tabs tabs-lifted pb-4">
+		<input
+			type="radio"
+			name="{example}"
+			role="tab"
+			class="tab"
+			aria-label="Preview"
+			checked
+		/>
+		<div bind:this={preview} role="tabpanel" class="flex tab-content border-base-300 rounded-box p-3 overflow-x-auto">
+			{@html html}
+		</div>
+
+		<a target="_blank" href="https://github.com/willpinha/daisy-collection/blob/master/src/examples/{tag}/{example}.html" class="tab">
+			Code
+		</a>
+
+		<a target="_blank" href="/playground/{tag}/{example}" class="tab">Playground</a>
+	</div>
+</div>
diff --git a/src/components/TagExamples.svelte b/src/components/TagExamples.svelte
@@ -4,28 +4,12 @@
     import Preview from "../components/Preview.svelte";
 
     export let tag: string;
-    export let withArrow: boolean = true;
-    export let smallTitle: boolean = false;
 
     const examples = collection[tag];
 </script>
 
-<div class="flex flex-col gap-8">
-    <div class="flex items-center gap-2">
-        {#if withArrow}
-            <a href="/" class="btn btn-ghost px-3">
-                <span class="hidden">Get back</span>
-
-                <i class="fa-solid fa-arrow-left-long text-2xl"></i>
-            </a>
-        {/if}
-
-        <h1 class="text-3xl font-bold text-primary" class:text-xl={smallTitle}>#{tag}</h1>
-    </div>
-
-    <ul class="timeline timeline-snap-icon timeline-compact timeline-vertical">
-        {#each Object.entries(examples) as [example, html]}
-            <Preview {tag} {example} {html} />
-        {/each}
-    </ul>
+<div class="flex flex-col gap-8 px-4 py-8">
+    {#each Object.entries(examples) as [example, html]}
+        <Preview {tag} {example} {html} />
+    {/each}
 </div>
diff --git a/src/layout/Content.astro b/src/layout/Content.astro
@@ -1,5 +1,5 @@
-<div class="flex justify-center px-4 py-6">
-    <div class="w-full max-w-screen-2xl">
+<div class="flex justify-center bg-base-300 min-h-screen pattern-isometric pattern-indigo-500 pattern-bg-transparent pattern-opacity-60 pattern-size-8">
+    <div class="w-full max-w-screen-md bg-base-100">
         <slot />
     </div>
-</div>
+</div>
diff --git a/src/pages/[tag].astro b/src/pages/[tag].astro
@@ -21,9 +21,9 @@ const { tag } = Astro.params;
 ---
 
 <Page title={tag}>
-    <Navbar />
-
     <Content>
+        <Navbar {tag} />
+
         <TagExamples client:load {tag} />
     </Content>
 </Page>
diff --git a/src/pages/all.astro b/src/pages/all.astro
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,9 +6,9 @@ import Filter from "../components/Filter.svelte";
 ---
 
 <Page title="Tags">
-    <Navbar />
-
     <Content>
+        <Navbar />
+
         <Filter client:load />
     </Content>
 </Page>