Setup docker for production and development
Change ./init.sh to be an executable then run it. The default inner container ports are as followed: - Postgres: 5432:5432 - Backend: 3001:3000 - Frontend: 3000:3000 - Frontend dev: 8000 The backend image needs to be built: docker compose up -d --build
This commit is contained in:
cdricms
174
frontend/components/gallery.tsx
Normal file
174
frontend/components/gallery.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
"use client";
|
||||
|
||||
import { ArrowLeft, ArrowRight } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Carousel,
|
||||
CarouselApi,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
} from "@/components/ui/carousel";
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: "item-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.",
|
||||
href: "#",
|
||||
image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
|
||||
},
|
||||
{
|
||||
id: "item-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.",
|
||||
href: "#",
|
||||
image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
|
||||
},
|
||||
{
|
||||
id: "item-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.",
|
||||
href: "#",
|
||||
image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
|
||||
},
|
||||
{
|
||||
id: "item-4",
|
||||
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.",
|
||||
href: "#",
|
||||
image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
|
||||
},
|
||||
{
|
||||
id: "item-5",
|
||||
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.",
|
||||
href: "#",
|
||||
image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
|
||||
},
|
||||
];
|
||||
|
||||
const Gallery = () => {
|
||||
const [carouselApi, setCarouselApi] = useState<CarouselApi>();
|
||||
const [canScrollPrev, setCanScrollPrev] = useState(false);
|
||||
const [canScrollNext, setCanScrollNext] = useState(false);
|
||||
useEffect(() => {
|
||||
if (!carouselApi) {
|
||||
return;
|
||||
}
|
||||
const updateSelection = () => {
|
||||
setCanScrollPrev(carouselApi.canScrollPrev());
|
||||
setCanScrollNext(carouselApi.canScrollNext());
|
||||
};
|
||||
updateSelection();
|
||||
carouselApi.on("select", updateSelection);
|
||||
return () => {
|
||||
carouselApi.off("select", updateSelection);
|
||||
};
|
||||
}, [carouselApi]);
|
||||
return (
|
||||
<section className="lg:md:py-24 sm:py-12 flex flex-col items-center overflow-visible">
|
||||
<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
|
||||
</p>
|
||||
<h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6">
|
||||
Gallery
|
||||
</h2>
|
||||
<a
|
||||
href="#"
|
||||
className="group flex items-center text-xs font-medium md:text-base lg:text-lg"
|
||||
>
|
||||
Book a demo{" "}
|
||||
<ArrowRight className="ml-2 size-4 transition-transform group-hover:translate-x-1" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="mt-8 flex shrink-0 items-center justify-center gap-2">
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
carouselApi?.scrollPrev();
|
||||
}}
|
||||
disabled={!canScrollPrev}
|
||||
className="disabled:pointer-events-auto"
|
||||
>
|
||||
<ArrowLeft className="size-5" />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
carouselApi?.scrollNext();
|
||||
}}
|
||||
disabled={!canScrollNext}
|
||||
className="disabled:pointer-events-auto"
|
||||
>
|
||||
<ArrowRight className="size-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container w-full overflow-y-auto">
|
||||
<Carousel
|
||||
setApi={setCarouselApi}
|
||||
opts={{
|
||||
breakpoints: {
|
||||
"(max-width: 768px)": {
|
||||
dragFree: true,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Gallery;
|
||||
Reference in New Issue
Block a user