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

Added CSRF & YouTube and dark mode

Browse Source
This commit is contained in:
cdricms
2025-01-22 17:39:03 +01:00
parent 48e761667f
commit 5a5846d853
29 changed files with 1186 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
frontend/components/gallery.tsx
View File

@@ -54,7 +54,14 @@ const data = [
},
];
const Gallery = () => {
const Gallery: React.FC<
React.PropsWithChildren<{
tagLine: string;
title: string;
cta: string;
ctaHref: string;
}>
> = ({ children, tagLine, title, cta, ctaHref }) => {
const [carouselApi, setCarouselApi] = useState<CarouselApi>();
const [canScrollPrev, setCanScrollPrev] = useState(false);
const [canScrollNext, setCanScrollNext] = useState(false);
@@ -73,21 +80,21 @@ const Gallery = () => {
};
}, [carouselApi]);
return (
<section className="lg:md:py-24 sm:py-12 flex flex-col items-center overflow-visible">
<section className="flex flex-col items-center overflow-visible sm:py-12 lg:md:py-24">
<div className="container">
<div className="mb-8 flex flex-col justify-between md:mb-14 md:flex-row md:items-end lg:mb-16">
<div>
<p className="mb-6 text-xs font-medium uppercase tracking-wider">
Tag Line
{tagLine}
</p>
<h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6">
Gallery
{title}
</h2>
<a
href="#"
href={ctaHref}
className="group flex items-center text-xs font-medium md:text-base lg:text-lg"
>
Book a demo{" "}
{cta}
<ArrowRight className="ml-2 size-4 transition-transform group-hover:translate-x-1" />
</a>
</div>
@@ -129,41 +136,16 @@ const Gallery = () => {
}}
>
<CarouselContent className="">
{data.map((item) => (
<CarouselItem
key={item.id}
className="pl-[20px] md:max-w-[452px]"
>
<a
href={item.href}
className="group flex flex-col justify-between"
>
<div>
<div className="flex aspect-[3/2] overflow-clip rounded-xl">
<div className="flex-1">
<div className="relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105">
<img
src={item.image}
alt={item.title}
className="h-full w-full object-cover object-center"
/>
</div>
</div>
</div>
</div>
<div className="mb-2 line-clamp-3 break-words pt-4 text-lg font-medium md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-2xl">
{item.title}
</div>
<div className="mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9">
{item.summary}
</div>
<div className="flex items-center text-sm">
Read more{" "}
<ArrowRight className="ml-2 size-5 transition-transform group-hover:translate-x-1" />
</div>
</a>
</CarouselItem>
))}
{children
? children
: data.map((item) => (
<CarouselItem
key={item.id}
className="pl-[20px] md:max-w-[452px]"
>
<DefaultGalleryItem item={item} />
</CarouselItem>
))}
</CarouselContent>
</Carousel>
</div>
@@ -171,4 +153,36 @@ const Gallery = () => {
);
};
export const DefaultGalleryItem: React.FC<{ item: (typeof data)[0] }> = ({
item,
}) => {
return (
<a href={item.href} className="group flex flex-col justify-between">
<div>
<div className="flex aspect-[3/2] overflow-clip rounded-xl">
<div className="flex-1">
<div className="relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105">
<img
src={item.image}
alt={item.title}
className="h-full w-full object-cover object-center"
/>
</div>
</div>
</div>
</div>
<div className="mb-2 line-clamp-3 break-words pt-4 text-lg font-medium md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-2xl">
{item.title}
</div>
<div className="mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9">
{item.summary}
</div>
<div className="flex items-center text-sm">
Read more{" "}
<ArrowRight className="ml-2 size-5 transition-transform group-hover:translate-x-1" />
</div>
</a>
);
};
export default Gallery;