sosokker/B2D-Ventures
1
0
Fork 0
mirror of https://github.com/Sosokker/B2D-Ventures.git synced 2025-12-19 05:54:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: refactor ImageModal and DisplayFullImage components to use destructured props

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-11-06 15:18:09 +07:00
parent 7084d4d0aa
commit 3191d4d2c8
2 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/(investment)/deals/[id]/displayImage.tsx
View File

@ -10,26 +10,32 @@ import {
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import Image from "next/image"; import Image from "next/image";
import { StaticImport } from "next/dist/shared/lib/get-img-props"; import { StaticImport } from "next/dist/shared/lib/get-img-props";
import { it } from "node:test";
const ImageModal = ({ item, width }: { item: { src: string | StaticImport; alt: string;} }, number ) => { interface ItemProps {
src: string | StaticImport;
alt: string;
width: number;
height: number;
}
const ImageModal = ({ src, alt, width, height }: ItemProps) => {
return ( return (
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<Image src={item.src} alt={item.alt} width={item.width} height={item.height} className="rounded-lg basis-0" /> <Image src={src} alt={alt} width={width} height={height} className="rounded-lg basis-0" />
</DialogTrigger> </DialogTrigger>
<DialogContent className=""> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>Image Preview</DialogTitle> <DialogTitle>Image Preview</DialogTitle>
<DialogDescription>Click outside to close the image preview.</DialogDescription> <DialogDescription>Click outside to close the image preview.</DialogDescription>
</DialogHeader> </DialogHeader>
<Image src={item.src} alt={item.alt} width={700} height={400} /> <Image src={src} alt={alt} width={700} height={400} />
<DialogFooter /> <DialogFooter />
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );
}; };
export function DisplayFullImage({ item }: { item: { src: string | StaticImport; alt: string; width: number; height: number } }) { export function DisplayFullImage({ src, alt, width, height }: ItemProps) {
return <ImageModal item={item} />; return <ImageModal src={src} alt={alt} width={width} height={height} />;
} }

5
src/app/(investment)/deals/[id]/page.tsx
View File

@ -49,7 +49,6 @@ export default async function ProjectDealPage({ params }: { params: { id: number
alt: `${projectData.project_name} Image`, alt: `${projectData.project_name} Image`,
}); });
return ( return (
<div className="container max-w-screen-xl my-5"> <div className="container max-w-screen-xl my-5">
<div className="flex flex-col gap-y-10"> <div className="flex flex-col gap-y-10">
@ -92,7 +91,9 @@ export default async function ProjectDealPage({ params }: { params: { id: number
<CarouselContent className="flex space-x-1"> <CarouselContent className="flex space-x-1">
{carouselData.map((item, index) => ( {carouselData.map((item, index) => (
<CarouselItem key={index} className="flex"> <CarouselItem key={index} className="flex">
<DisplayFullImage item={item} width={200} height={100}/> <CarouselItem key={index} className="flex">
<DisplayFullImage src="/path/to/image.jpg" alt="Image description" width={300} height={200} />
</CarouselItem>
</CarouselItem> </CarouselItem>
))} ))}
</CarouselContent> </CarouselContent>