cdricms/latosa-escrima
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev/guerby' into dev/cedric

Browse Source
This commit is contained in:
cdricms
2025-01-14 11:14:29 +01:00
parent 648517078b bfee01dba4
commit a71b9a0fa2
5 changed files with 202 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
latosa-frontend/app/(main)/gallery/page.tsx
View File

@@ -1,3 +0,0 @@
export default function Gallery() {
return <></>;
}

91
latosa-frontend/app/(main)/history/[slug]/page.tsx
View File

@@ -1,80 +1,31 @@
"use server"; "use server";
import { BlogInterface, posts } from "@/components/blog";
import BlogItem, { BlogItemParams } from "@/components/blogItem";
export default async function HistoryDetails({ export default async function HistoryDetails({
params, params,
}: { }: {
params: Promise<{ slug: string }>; params: Promise<{ slug: string }>;
}) { }) {
const { slug } = await params; 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 ( const blog_item: BlogInterface = posts.find(
<main className="flex flex-col w-full lg:md:py-24 sm:py-24"> (value) => value.slug == slug,
<section className="container self-center max-w-2xl"> ) as BlogInterface;
<div className="blog-title w-full h-28 justify-center">
<h1 className="mb-3 text-pretty text-3xl font-semibold lg:text-5xl"> const blog_item_params: BlogItemParams = {
{slug} slug: slug,
</h1> title_style:
</div> "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",
<div className="content"> subtitle_style:
<div> "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",
<h2 className={sub_header_style}>Subtitle 1</h2> p_style:
<p className={default_style}> "blog-paragraph mb-5 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg",
Lorem ipsum dolor sit amet, consectetur adipisicing default_img:
elit. Deleniti architecto incidunt, hic in "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
consectetur eligendi nobis numquam tenetur sit blog_content: blog_item,
repellat et unde, maxime ducimus autem esse };
temporibus omnis eum molestias!
</p> return <BlogItem params={blog_item_params} />;
</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>
);
} }

185
latosa-frontend/components/blog.tsx
View File

@@ -2,92 +2,111 @@ import { ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
const posts = [ export interface BlogInterface {
{ id: string,
id: "post-1", slug: string,
title: "Duis sem sem, gravida vel porttitor eu, volutpat ut arcu", title: string,
summary: content: string,
"Pellentesque eget quam ligula. Sed felis ante, consequat nec ultrices ut, ornare quis metus. Vivamus sit amet tortor vel enim sollicitudin hendrerit.", label: string,
label: "Ut varius dolor turpis", author: string,
author: "Jane Doe", published: string,
published: "1 Jan 2024", }
href: "#",
image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg", export interface BlogSummaryInterface extends BlogInterface {
}, summary: string,
{ image: string,
id: "post-2", href: string
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.", export const posts: BlogSummaryInterface[] = [
label: "Ut varius dolor turpis", {
author: "Jane Doe", id: 'a1b2c3d4-e5f6-7g8h-9i0j-k1l2m3n4o5p6',
published: "1 Jan 2024", slug: 'tech-advancements-2025',
href: "#", title: 'Tech Advancements in 2025',
image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg", 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',
id: "post-3", published: '2025-01-14',
title: "Duis sem sem, gravida vel porttitor eu, volutpat ut arcu", summary: 'A look at the tech trends to expect in 2025 and beyond, from AI to quantum computing.',
summary: image: 'https://via.placeholder.com/600x400?text=Tech+2025',
"Pellentesque eget quam ligula. Sed felis ante, consequat nec ultrices ut, ornare quis metus. Vivamus sit amet tortor vel enim sollicitudin hendrerit.", href: 'history/tech-advancements-2025'
label: "Ut varius dolor turpis", },
author: "Jane Doe", {
published: "1 Jan 2024", id: 'f7g8h9i0-j1k2l3m4-n5o6p7q8r9s0t1u2v3',
href: "#", slug: 'sustainable-fashion-2025',
image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg", 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: '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 = () => { const Blog = () => {
return ( return (
<section className="self-center lg:md:py-24 sm:py-12"> <section className="self-center lg:md:py-24 sm:py-12">
<div className="container flex flex-col items-center gap-16 lg:px-16"> <div className="container flex flex-col items-center gap-16 lg:px-16">
<div className="text-center"> <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"> <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 En savoir plus sur ce sport
</h2> </h2>
<p className="mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg"> <p className="mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig
doloremque mollitia fugiat omnis! Porro facilis quo animi doloremque mollitia fugiat omnis! Porro facilis quo animi
consequatur. Explicabo. consequatur. Explicabo.
</p> </p>
<Button variant="link" className="w-full sm:w-auto"> <Button variant="link" className="w-full sm:w-auto">
Explore all posts Explore all posts
<ArrowRight className="ml-2 size-4" /> <ArrowRight className="ml-2 size-4" />
</Button> </Button>
</div> </div>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8"> <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
{posts.map((post) => ( {posts.map((post) => (
<a <a
key={post.id} key={post.id}
href={post.href} href={post.href}
className="flex flex-col overflow-clip rounded-xl border border-border" className="flex flex-col overflow-clip rounded-xl border border-border"
> >
<div> <div>
<img <img
src={post.image} src={post.image}
alt={post.title} alt={post.title}
className="aspect-[16/9] h-full w-full object-cover object-center" className="aspect-[16/9] h-full w-full object-cover object-center"
/> />
</div> </div>
<div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12"> <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"> <h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
{post.title} {post.title}
</h3> </h3>
<p className="mb-3 text-muted-foreground md:mb-4 lg:mb-6"> <p className="mb-3 text-muted-foreground md:mb-4 lg:mb-6">
{post.summary} {post.summary}
</p> </p>
<p className="flex items-center hover:underline"> <p className="flex items-center hover:underline">
Read more Read more
<ArrowRight className="ml-2 size-4" /> <ArrowRight className="ml-2 size-4" />
</p> </p>
</div> </div>
</a> </a>
))} ))}
</div> </div>
</div> </div>
</section> </section>
); );
}; };
export default Blog; export default Blog;

65
latosa-frontend/components/blogItem.tsx Normal file
View 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>
)
}

103
latosa-frontend/components/nav-bar.tsx
View File

@@ -9,15 +9,7 @@ import {
AccordionTrigger, AccordionTrigger,
} from "@/components/ui/accordion"; } from "@/components/ui/accordion";
import { Button, buttonVariants } from "@/components/ui/button"; import { Button, buttonVariants } from "@/components/ui/button";
import { import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
import { import {
Sheet, Sheet,
SheetContent, SheetContent,
@@ -103,85 +95,18 @@ const Navbar = () => {
> >
Accueil Accueil
</Link> </Link>
<NavigationMenu> <a
<NavigationMenuList> className={cn(
<NavigationMenuItem className="text-muted-foreground"> "text-muted-foreground",
<NavigationMenuTrigger> navigationMenuTriggerStyle,
<span>Products</span> buttonVariants({
</NavigationMenuTrigger> variant: "ghost",
<NavigationMenuContent> }),
<ul className="w-80 p-3"> )}
<NavigationMenuLink> href="/"
{subMenuItemsOne.map( >
(item, idx) => ( Calendar
<li key={idx}> </a>
<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>
<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 <a
className={cn( className={cn(
"text-muted-foreground", "text-muted-foreground",
@@ -202,7 +127,7 @@ const Navbar = () => {
variant: "ghost", variant: "ghost",
}), }),
)} )}
href="#" href="/history"
> >
Blog Blog
</a> </a>