Blogs listing + Categories

frontend/components/article.tsx

@@ -10,7 +10,9 @@ const BlogArticle: React.FC<{ blog: Blog }> = ({ blog }) => {
 			<div className="space-y-6">
 				<div className="space-y-2">
 					<div className="flex items-center gap-2">
-						<Badge variant="secondary">{blog.category}</Badge>
+						{blog.category && (
+							<Badge variant="secondary">{blog.category}</Badge>
+						)}
 						<time className="flex items-center text-sm text-muted-foreground">
 							<CalendarIcon className="mr-1 h-4 w-4" />
 							{new Date(blog.published).toLocaleString()}
@@ -57,7 +59,10 @@ const BlogArticle: React.FC<{ blog: Blog }> = ({ blog }) => {
 					/>
 				</div>
 
-				<div dangerouslySetInnerHTML={{ __html: blog.content }} />
+				<div
+					className="prose prose-lg prose-slate dark:prose-invert"
+					dangerouslySetInnerHTML={{ __html: blog.content }}
+				/>
 			</div>
 		</article>
 	);

frontend/components/blog-card.tsx

@@ -0,0 +1,39 @@
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { Blog } from "@/types/types";
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "./ui/badge";
+
+export function BlogCard({ blog }: { blog: Blog }) {
+	return (
+		<Card className="overflow-hidden border border-border rounded-xl">
+			<Link href={`/blogs/${blog.slug}`} className="block">
+				<img
+					src={blog.image}
+					alt={blog.title}
+					className="aspect-[16/9] w-full object-cover object-center"
+				/>
+			</Link>
+			<CardContent className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
+				<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
+					{blog.title}
+				</h3>
+				<p className="mb-3 text-muted-foreground md:mb-4 lg:mb-6">
+					{blog.summary}
+				</p>
+				<Link
+					href={`/blogs/${blog.slug}`}
+					className="flex items-center hover:underline"
+				>
+					En savoir plus
+					<ArrowRight className="ml-2 size-4" />
+				</Link>
+			</CardContent>
+			{blog.category && (
+				<CardFooter>
+					<Badge>{blog.category}</Badge>
+				</CardFooter>
+			)}
+		</Card>
+	);
+}

frontend/components/blog.tsx

@@ -1,72 +1,14 @@
-import { ArrowRight, ArrowDown } from "lucide-react";
+import { ArrowDown } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { Blog } from "@/types/types";
+import { BlogCard } from "./blog-card";
 
-export interface BlogInterface {
-	id: string;
-	slug: string;
-	title: string;
-	content: string;
-	label: string;
-	author: string;
-	published: string;
-}
-
-export interface BlogSummaryInterface extends BlogInterface {
-	summary: string;
-	image: string;
-	href: string;
-}
-
-export const posts: BlogSummaryInterface[] = [
-	{
-		id: "a1b2c3d4-e5f6-7g8h-9i0j-k1l2m3n4o5p6",
-		slug: "tech-advancements-2025",
-		title: "Tech Advancements in 2025",
-		content:
-			"The year 2025 promises groundbreaking technologies that will reshape industries. In this article, we explore the key advancements that could transform how we work, live, and communicate.",
-		label: "Technology",
-		author: "d3f5e6g7-h8i9j0k1-l2m3n4o5p6q7",
-		published: "2025-01-14",
-		summary:
-			"A look at the tech trends to expect in 2025 and beyond, from AI to quantum computing.",
-		image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
-		href: "history/tech-advancements-2025",
-	},
-	{
-		id: "f7g8h9i0-j1k2l3m4-n5o6p7q8r9s0t1u2v3",
-		slug: "sustainable-fashion-2025",
-		title: "Sustainable Fashion in 2025",
-		content:
-			"Sustainability is no longer a trend, but a movement within the fashion industry. This article discusses how eco-friendly practices are influencing fashion designs and consumer behavior in 2025.",
-		label: "Fashion",
-		author: "w4x5y6z7-a8b9c0d1-e2f3g4h5i6j7",
-		published: "2025-01-12",
-		summary:
-			"Exploring how sustainable fashion is evolving in 2025 with innovative materials and ethical brands.",
-		image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
-		href: "history/sustainable-fashion-2025",
-	},
-	{
-		id: "v1w2x3y4-z5a6b7c8-d9e0f1g2h3i4j5k6l7",
-		slug: "mental-health-awareness-2025",
-		title: "Mental Health Awareness in 2025",
-		content:
-			"As mental health awareness continues to grow, 2025 brings new challenges and opportunities to address psychological well-being. This article focuses on emerging trends in mental health support and public perception.",
-		label: "Health",
-		author: "m8n9o0p1-q2r3s4t5-u6v7w8x9y0z1a2b3",
-		published: "2025-01-10",
-		summary:
-			"Highlighting the importance of mental health awareness in 2025, focusing on new treatments and societal changes.",
-		image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
-		href: "/history/mental-health-awareness-2025",
-	},
-];
-
-const Blog = () => {
+const Blogs: React.FC<{ blogs: Blog[] }> = ({ blogs }) => {
 	return (
-		<section className="self-center lg:md:py-24 sm:py-12">
-			<div className="container flex flex-col items-center gap-16 lg:px-16">
+		<section className="self-center lg:md:py-24 py-12 md:px-16 px-4 mx-auto">
+			<div className="container flex flex-col items-center gap-16 ">
+				{/*
 				<div className="text-center">
 					<h2 className="mb-3 text-pretty text-3xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl">
 						En savoir plus sur ce sport
@@ -76,34 +18,10 @@ const Blog = () => {
 						Elig doloremque mollitia fugiat omnis! Porro facilis quo
 						animi consequatur. Explicabo.
 					</p>
-				</div>
+				</div> */}
 				<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
-					{posts.map((post) => (
-						<a
-							key={post.id}
-							href={post.href}
-							className="flex flex-col overflow-clip rounded-xl border border-border"
-						>
-							<div>
-								<img
-									src={post.image}
-									alt={post.title}
-									className="aspect-[16/9] h-full w-full object-cover object-center"
-								/>
-							</div>
-							<div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
-								<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
-									{post.title}
-								</h3>
-								<p className="mb-3 text-muted-foreground md:mb-4 lg:mb-6">
-									{post.summary}
-								</p>
-								<p className="flex items-center hover:underline">
-									Read more
-									<ArrowRight className="ml-2 size-4" />
-								</p>
-							</div>
-						</a>
+					{blogs.map((blog) => (
+						<BlogCard key={blog.blogID} blog={blog} />
 					))}
 				</div>
 				<Button variant="link" className="w-full sm:w-auto">
@@ -115,4 +33,4 @@ const Blog = () => {
 	);
 };
 
-export default Blog;
+export default Blogs;

frontend/components/blogItem.tsx

@@ -1,78 +0,0 @@
-import { Blog } from "@/types/types";
-
-export interface BlogItemParams {
-	title_style: string;
-	subtitle_style: string;
-	p_style: string;
-	default_img: string;
-	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">
-						{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}>
-							Lorem ipsum dolor sit amet, consectetur adipisicing
-							elit. Deleniti architecto incidunt, hic in
-							consectetur eligendi nobis numquam tenetur sit
-							repellat et unde, maxime ducimus autem esse
-							temporibus omnis eum molestias!
-						</p>
-					</div>
-					<div>
-						<img
-							src={params.default_img}
-							alt={blog.slug}
-							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
-						/>
-					</div>
-					<div>
-						<h2 className={params.subtitle_style}>Subtitle 2</h2>
-						<p className={params.p_style}>
-							Lorem ipsm dolor sit amet, consectetur adipisicing
-							elit. Deleniti architecto incidunt, hic in
-							consectetur eligendi nobis numquam tenetur sit
-							repellat et unde, maxime ducimus autem esse
-							temporibus omnis eum molestias!
-						</p>
-					</div>
-					<div>
-						<img
-							src={params.default_img}
-							alt={blog.slug}
-							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
-						/>
-					</div>
-					<div>
-						<h2 className={params.subtitle_style}>Subtitle 3</h2>
-						<p className={params.p_style}>
-							Lorem ipsum dolor sit amet, consectetur adipisicing
-							elit. Deleniti architecto incidunt, hic in
-							consectetur eligendi nobis numquam tenetur sit
-							repellat et unde, maxime ducimus autem esse
-							temporibus omnis eum molestias!
-						</p>
-						<p className={params.p_style}>
-							Lorem ipsum dolor sit amet, consectetur adipisicing
-							elit. Deleniti architecto incidunt, hic in
-							consectetur eligendi nobis numquam tenetur sit
-							repellat et unde, maxime ducimus autem esse
-							temporibus omnis eum molestias!
-						</p>
-					</div>
-				</div>
-			</section>
-		</main>
-	);
-}

frontend/components/ui/combobox.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import * as React from "react";
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { useState } from "react";
+
+interface ComboBoxProps<T> {
+	elements: T[];
+	trigger: (value?: string) => React.ReactNode;
+	onSubmit?: (value: string) => void;
+	value: string;
+	setValue: React.Dispatch<React.SetStateAction<string>>;
+	children: (
+		ItemComponent: (
+			props: React.ComponentProps<typeof CommandItem> & { label: string },
+		) => React.JSX.Element,
+		element: T,
+	) => React.ReactNode;
+}
+
+const ComboBox = <T,>({
+	elements,
+	trigger,
+	children,
+	onSubmit,
+	value,
+	setValue,
+}: ComboBoxProps<T>) => {
+	const [open, setOpen] = useState(false);
+	const [searchValue, setSearchValue] = useState("");
+
+	const handleSubmit = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key !== "Enter") return;
+		e.preventDefault();
+		setValue(searchValue);
+		onSubmit?.(searchValue);
+	};
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				{trigger(value.length > 0 ? value : undefined)}
+			</PopoverTrigger>
+			<PopoverContent className="w-[200px] p-0">
+				<Command>
+					<CommandInput
+						onKeyDown={handleSubmit}
+						onInput={(e) =>
+							setSearchValue((e.target as HTMLInputElement).value)
+						}
+						placeholder="Search framework..."
+					/>
+					<CommandList>
+						<CommandEmpty>
+							Créer une nouvelle catégorie
+						</CommandEmpty>
+						<CommandGroup>
+							{elements.map((element, index) =>
+								children(
+									({
+										value: elementValue,
+										label,
+										onSelect,
+										...props
+									}) => (
+										<CommandItem
+											key={index}
+											value={elementValue ?? ""}
+											onSelect={(_value) => {
+												setValue(_value);
+												console.log(elementValue);
+												setOpen(false);
+												onSelect?.(_value);
+											}}
+											{...props}
+										>
+											{label}
+											<Check
+												className={cn(
+													"mr-2 h-4 w-4",
+													value === elementValue
+														? "opacity-100"
+														: "opacity-0",
+												)}
+											/>
+										</CommandItem>
+									),
+									element,
+								),
+							)}
+						</CommandGroup>
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
+};
+
+export default ComboBox;

frontend/components/ui/command.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+
+const Command = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive
+		ref={ref}
+		className={cn(
+			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+	return (
+		<Dialog {...props}>
+			<DialogContent className="overflow-hidden p-0 shadow-lg">
+				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+const CommandInput = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.Input>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+		<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+		<CommandPrimitive.Input
+			ref={ref}
+			className={cn(
+				"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	</div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.List
+		ref={ref}
+		className={cn(
+			"max-h-[300px] overflow-y-auto overflow-x-hidden",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.Empty>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+	<CommandPrimitive.Empty
+		ref={ref}
+		className="py-6 text-center text-sm"
+		{...props}
+	/>
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.Group>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Group
+		ref={ref}
+		className={cn(
+			"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 h-px bg-border", className)}
+		{...props}
+	/>
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn(
+				"ml-auto text-xs tracking-widest text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
+};