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";
import Image from "next/image";
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 (
<Dialog>
<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>
<DialogContent className="">
<DialogContent>
<DialogHeader>
<DialogTitle>Image Preview</DialogTitle>
<DialogDescription>Click outside to close the image preview.</DialogDescription>
</DialogHeader>
<Image src={item.src} alt={item.alt} width={700} height={400} />
<Image src={src} alt={alt} width={700} height={400} />
<DialogFooter />
</DialogContent>
</Dialog>
);
};
export function DisplayFullImage({ item }: { item: { src: string | StaticImport; alt: string; width: number; height: number } }) {
return <ImageModal item={item} />;
export function DisplayFullImage({ src, alt, width, height }: ItemProps) {
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`,
});
return (
<div className="container max-w-screen-xl my-5">
<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">
{carouselData.map((item, index) => (
<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>
))}
</CarouselContent>