Merge remote-tracking branch 'origin/dev/guerby' into dev/cedric
This commit is contained in:
cdricms
@@ -1,3 +0,0 @@
|
||||
export default function Gallery() {
|
||||
return <></>;
|
||||
}
|
||||
@@ -1,80 +1,31 @@
|
||||
"use server";
|
||||
|
||||
import { BlogInterface, posts } from "@/components/blog";
|
||||
import BlogItem, { BlogItemParams } from "@/components/blogItem";
|
||||
|
||||
export default async function HistoryDetails({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
const default_img: string =
|
||||
"https://shadcnblocks.com/images/block/placeholder-dark-1.svg";
|
||||
const default_style: string =
|
||||
"blog-paragraph mb-5 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg";
|
||||
const sub_header_style: string =
|
||||
"py-12 mb-3 text-pretty text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-3xl";
|
||||
|
||||
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">
|
||||
{slug}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div>
|
||||
<h2 className={sub_header_style}>Subtitle 1</h2>
|
||||
<p className={default_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={default_img}
|
||||
alt={slug}
|
||||
className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className={sub_header_style}>Subtitle 2</h2>
|
||||
<p className={default_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={default_img}
|
||||
alt={slug}
|
||||
className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className={sub_header_style}>Subtitle 3</h2>
|
||||
<p className={default_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={default_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>
|
||||
);
|
||||
const blog_item: BlogInterface = posts.find(
|
||||
(value) => value.slug == slug,
|
||||
) as BlogInterface;
|
||||
|
||||
const blog_item_params: BlogItemParams = {
|
||||
slug: slug,
|
||||
title_style:
|
||||
"py-12 mb-3 text-pretty text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-3xl",
|
||||
subtitle_style:
|
||||
"py-12 mb-3 text-pretty text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-3xl",
|
||||
p_style:
|
||||
"blog-paragraph mb-5 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg",
|
||||
default_img:
|
||||
"https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
|
||||
blog_content: blog_item,
|
||||
};
|
||||
|
||||
return <BlogItem params={blog_item_params} />;
|
||||
}
|
||||
|
||||
@@ -2,40 +2,59 @@ import { ArrowRight } from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
const posts = [
|
||||
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: "post-1",
|
||||
title: "Duis sem sem, gravida vel porttitor eu, volutpat ut arcu",
|
||||
summary:
|
||||
"Pellentesque eget quam ligula. Sed felis ante, consequat nec ultrices ut, ornare quis metus. Vivamus sit amet tortor vel enim sollicitudin hendrerit.",
|
||||
label: "Ut varius dolor turpis",
|
||||
author: "Jane Doe",
|
||||
published: "1 Jan 2024",
|
||||
href: "#",
|
||||
image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
|
||||
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://via.placeholder.com/600x400?text=Tech+2025',
|
||||
href: 'history/tech-advancements-2025'
|
||||
},
|
||||
{
|
||||
id: "post-2",
|
||||
title: "Duis sem sem, gravida vel porttitor eu, volutpat ut arcu",
|
||||
summary:
|
||||
"Pellentesque eget quam ligula. Sed felis ante, consequat nec ultrices ut, ornare quis metus. Vivamus sit amet tortor vel enim sollicitudin hendrerit.",
|
||||
label: "Ut varius dolor turpis",
|
||||
author: "Jane Doe",
|
||||
published: "1 Jan 2024",
|
||||
href: "#",
|
||||
image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
|
||||
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://via.placeholder.com/600x400?text=Sustainable+Fashion',
|
||||
href: 'history/sustainable-fashion-2025'
|
||||
},
|
||||
{
|
||||
id: "post-3",
|
||||
title: "Duis sem sem, gravida vel porttitor eu, volutpat ut arcu",
|
||||
summary:
|
||||
"Pellentesque eget quam ligula. Sed felis ante, consequat nec ultrices ut, ornare quis metus. Vivamus sit amet tortor vel enim sollicitudin hendrerit.",
|
||||
label: "Ut varius dolor turpis",
|
||||
author: "Jane Doe",
|
||||
published: "1 Jan 2024",
|
||||
href: "#",
|
||||
image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
|
||||
},
|
||||
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://via.placeholder.com/600x400?text=Mental+Health+2025',
|
||||
href: '/history/mental-health-awareness-2025'
|
||||
}
|
||||
];
|
||||
|
||||
const Blog = () => {
|
||||
|
||||
65
latosa-frontend/components/blogItem.tsx
Normal file
65
latosa-frontend/components/blogItem.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { BlogInterface } from "@/components/blog";
|
||||
|
||||
export interface BlogItemParams {
|
||||
slug: string
|
||||
title_style: string,
|
||||
subtitle_style: string,
|
||||
p_style: string,
|
||||
default_img: string
|
||||
blog_content: BlogInterface
|
||||
}
|
||||
|
||||
export default function BlogItem({ params }
|
||||
: { params: BlogItemParams }
|
||||
) {
|
||||
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}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="content">
|
||||
<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={params.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={params.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>
|
||||
)
|
||||
}
|
||||
@@ -9,15 +9,7 @@ import {
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
navigationMenuTriggerStyle,
|
||||
} from "@/components/ui/navigation-menu";
|
||||
import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
@@ -103,85 +95,18 @@ const Navbar = () => {
|
||||
>
|
||||
Accueil
|
||||
</Link>
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList>
|
||||
<NavigationMenuItem className="text-muted-foreground">
|
||||
<NavigationMenuTrigger>
|
||||
<span>Products</span>
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<ul className="w-80 p-3">
|
||||
<NavigationMenuLink>
|
||||
{subMenuItemsOne.map(
|
||||
(item, idx) => (
|
||||
<li key={idx}>
|
||||
<a
|
||||
className={cn(
|
||||
"flex select-none gap-4 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
|
||||
"text-muted-foreground",
|
||||
navigationMenuTriggerStyle,
|
||||
buttonVariants({
|
||||
variant: "ghost",
|
||||
}),
|
||||
)}
|
||||
href="#"
|
||||
href="/"
|
||||
>
|
||||
{item.icon}
|
||||
<div>
|
||||
<div className="text-sm font-semibold">
|
||||
{
|
||||
item.title
|
||||
}
|
||||
</div>
|
||||
<p className="text-sm leading-snug text-muted-foreground">
|
||||
{
|
||||
item.description
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
Calendar
|
||||
</a>
|
||||
</li>
|
||||
),
|
||||
)}
|
||||
</NavigationMenuLink>
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem className="text-muted-foreground">
|
||||
<NavigationMenuTrigger>
|
||||
Resources
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<ul className="w-80 p-3">
|
||||
<NavigationMenuLink>
|
||||
{subMenuItemsTwo.map(
|
||||
(item, idx) => (
|
||||
<li key={idx}>
|
||||
<a
|
||||
className={cn(
|
||||
"flex select-none gap-4 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
|
||||
)}
|
||||
href="#"
|
||||
>
|
||||
{item.icon}
|
||||
<div>
|
||||
<div className="text-sm font-semibold">
|
||||
{
|
||||
item.title
|
||||
}
|
||||
</div>
|
||||
<p className="text-sm leading-snug text-muted-foreground">
|
||||
{
|
||||
item.description
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
),
|
||||
)}
|
||||
</NavigationMenuLink>
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
|
||||
<a
|
||||
className={cn(
|
||||
"text-muted-foreground",
|
||||
@@ -202,7 +127,7 @@ const Navbar = () => {
|
||||
variant: "ghost",
|
||||
}),
|
||||
)}
|
||||
href="#"
|
||||
href="/history"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user