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

blog items mock-up components

Browse Source
This commit is contained in:
gom-by
2025-01-14 10:54:34 +01:00
parent eedc4fb3be
commit f833001b94
7 changed files with 188 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
latosa-frontend/app/gallery/page.tsx
View File

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

67
latosa-frontend/app/history/[slug]/page.tsx
View File

@@ -1,63 +1,28 @@
"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 blog_item: BlogInterface = posts.find((value) => value.slug == slug) as BlogInterface
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"
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 ( return (
<main className="flex flex-col w-full lg:md:py-24 sm:py-24"> <BlogItem params={blog_item_params} />
<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>
) )
} }

6
latosa-frontend/app/page.tsx
View File

@@ -1,7 +1,7 @@
"use server"; "use server";
import Features, { FeatureItem } from "@/components/features"; import Features, { FeatureItem } from "@/components/features";
import Gallery6 from "@/components/gallery"; import Gallery from "@/components/gallery";
import Hero from "@/components/hero"; import Hero from "@/components/hero";
export default async function Home() { export default async function Home() {
@@ -108,8 +108,8 @@ export default async function Home() {
</ul> </ul>
</FeatureItem> </FeatureItem>
</Features> </Features>
<Gallery6 /> <Gallery />
<Gallery6 /> <Gallery />
</div> </div>
</main> </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>
)
}

4
latosa-frontend/components/gallery.tsx
View File

@@ -54,7 +54,7 @@ const data = [
}, },
]; ];
const Gallery6 = () => { const Gallery = () => {
const [carouselApi, setCarouselApi] = useState<CarouselApi>(); const [carouselApi, setCarouselApi] = useState<CarouselApi>();
const [canScrollPrev, setCanScrollPrev] = useState(false); const [canScrollPrev, setCanScrollPrev] = useState(false);
const [canScrollNext, setCanScrollNext] = useState(false); const [canScrollNext, setCanScrollNext] = useState(false);
@@ -171,4 +171,4 @@ const Gallery6 = () => {
); );
}; };
export default Gallery6; export default Gallery;

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

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