ui

src/lib/components/Comment.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { icons } from 'feather-icons';
+</script>
+
+<div class="flex items-center space-x-2 text-sm">
+	<div class="flex">
+		{@html icons['chevrons-up'].toSvg({ class: 'feather', width: '18px', height: '18px' })}
+	</div>
+	<Separator orientation="vertical" />
+	<div>
+		<div class="flex h-3 items-center space-x-4 text-xs text-gray-100">
+			<div>56 points by toshi</div>
+			<Separator orientation="vertical" />
+			<div>4 hours ago</div>
+			<Separator orientation="vertical" />
+			<div>hide</div>
+			<Separator orientation="vertical" />
+			<div>22 comments</div>
+		</div>
+		<div class="space-y-1">
+			<p class=" inline text-sm p-2 text-black">
+				Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus neque ex velit ullam
+				doloremque distinctio delectus perspiciatis, atque quae aliquid temporibus impedit rem
+				enim?Exercitationem, iste voluptatum. Ipsa, delectus distinctio!
+			</p>
+		</div>
+	</div>
+</div>
+<Separator class="my-2" />

src/lib/components/Jobs.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Separator } from '$lib/components/ui/separator/index.js';
+</script>
+
+<div class="flex items-center space-x-2 text-sm">
+	<div>
+		<div class="space-y-1">
+			<h4 class="text-md font-semibold leading-none inline">Radix Primitives</h4>
+			<p class=" inline text-sm px-1 text-muted-foreground">
+				<a href="https://github.com">(github.com)</a>
+			</p>
+		</div>
+		<div class="flex h-5 items-center space-x-4 text-xs">
+			<div>4 hours ago</div>
+		</div>
+	</div>
+</div>
+<Separator class="my-2" />

src/routes/comments/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import Comment from '$lib/components/Comment.svelte';
+	let items = Array.from({ length: 13 });
+</script>
+
+{#each items as _, i}
+	<Comment key={i} />
+{/each}
+<a href="/newest">More</a>

src/routes/jobs/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import News from '$lib/components/News.svelte';
+	import Jobs from '$lib/components/Jobs.svelte';
 	let items = Array.from({ length: 13 });
 </script>
 
+<p class="py-2">These are jobs at YC startups. See more at <a href="/">ycombinator.com/jobs.</a></p>
 {#each items as _, i}
-	<News key={i} />
+	<Jobs key={i} />
 {/each}
 <a href="/newest">More</a>

src/routes/past/+page.svelte

@@ -3,6 +3,11 @@
 	let items = Array.from({ length: 13 });
 </script>
 
+<p class="py-2">Stories from April 5, 2024 (UTC)</p>
+<p class="py-2">
+	Go back a <a href="/">day</a>, <a href="/">month</a>, or <a href="/">year</a>. Go forward a
+	<a href="/">day</a>.
+</p>
 {#each items as _, i}
 	<News key={i} />
 {/each}

src/routes/show/+page.svelte

@@ -3,6 +3,9 @@
 	let items = Array.from({ length: 13 });
 </script>
 
+<p class="py-2">
+	Please read the <a href="/">rules</a>. You can also browse the <a href="/">newest</a> Show HNs.
+</p>
 {#each items as _, i}
 	<News key={i} />
 {/each}