trucs inutilesé

frontend/components/blog.tsx

@@ -1,4 +1,4 @@
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, ArrowDown } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 
@@ -30,7 +30,7 @@ export const posts: BlogSummaryInterface[] = [
 		published: "2025-01-14",
 		summary:
 			"A look at the tech trends to expect in 2025 and beyond, from AI to quantum computing.",
-		image: "https://via.placeholder.com/600x400?text=Tech+2025",
+		image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
 		href: "history/tech-advancements-2025",
 	},
 	{
@@ -44,7 +44,7 @@ export const posts: BlogSummaryInterface[] = [
 		published: "2025-01-12",
 		summary:
 			"Exploring how sustainable fashion is evolving in 2025 with innovative materials and ethical brands.",
-		image: "https://via.placeholder.com/600x400?text=Sustainable+Fashion",
+		image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
 		href: "history/sustainable-fashion-2025",
 	},
 	{
@@ -58,7 +58,7 @@ export const posts: BlogSummaryInterface[] = [
 		published: "2025-01-10",
 		summary:
 			"Highlighting the importance of mental health awareness in 2025, focusing on new treatments and societal changes.",
-		image: "https://via.placeholder.com/600x400?text=Mental+Health+2025",
+		image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
 		href: "/history/mental-health-awareness-2025",
 	},
 ];
@@ -76,10 +76,6 @@ const Blog = () => {
 						Elig doloremque mollitia fugiat omnis! Porro facilis quo
 						animi consequatur. Explicabo.
 					</p>
-					<Button variant="link" className="w-full sm:w-auto">
-						Explore all posts
-						<ArrowRight className="ml-2 size-4" />
-					</Button>
 				</div>
 				<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
 					{posts.map((post) => (
@@ -110,6 +106,10 @@ const Blog = () => {
 						</a>
 					))}
 				</div>
+				<Button variant="link" className="w-full sm:w-auto">
+					Explore more
+					<ArrowDown className="ml-2 size-4" />
+				</Button>
 			</div>
 		</section>
 	);

frontend/components/blogItem.tsx

@@ -1,24 +1,25 @@
-import { BlogInterface } from "@/components/blog";
+import { Blog } from "@/types/types";
 
 export interface BlogItemParams {
-	slug: string;
 	title_style: string;
 	subtitle_style: string;
 	p_style: string;
 	default_img: string;
-	blog_content: BlogInterface;
+	blog: Blog;
 }
 
 export default function BlogItem({ params }: { params: BlogItemParams }) {
+	const blog: Blog = params.blog
 	return (
 		<main className="flex flex-col w-full lg:md:py-24 sm:py-24">
 			<section className="container self-center max-w-2xl">
 				<div className="blog-title w-full h-28 justify-center">
 					<h1 className="mb-3 text-pretty text-3xl font-semibold lg:text-5xl">
-						{params.slug}
+						{blog.slug}
 					</h1>
 				</div>
 				<div className="content">
+					{/* blog.content here will be transformed from markdown to actual code */}
 					<div>
 						<h2 className={params.subtitle_style}>Subtitle 1</h2>
 						<p className={params.p_style}>
@@ -32,7 +33,7 @@ export default function BlogItem({ params }: { params: BlogItemParams }) {
 					<div>
 						<img
 							src={params.default_img}
-							alt={params.slug}
+							alt={blog.slug}
 							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
 						/>
 					</div>
@@ -49,7 +50,7 @@ export default function BlogItem({ params }: { params: BlogItemParams }) {
 					<div>
 						<img
 							src={params.default_img}
-							alt={params.slug}
+							alt={blog.slug}
 							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
 						/>
 					</div>

frontend/components/nav-bar.tsx

@@ -126,7 +126,7 @@ const Navbar = () => {
 										variant: "ghost",
 									}),
 								)}
-								href="/history"
+								href="/blogs"
 							>
 								Blog
 							</a>

frontend/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }