add photogear component

tahsinature · May 30, 2024 · 92cb694 · 92cb694
1 parent 8f9391b
commit 92cb694
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 9 deletions.
diff --git a/src/app/photographs/PhotoGear.tsx b/src/app/photographs/PhotoGear.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import * as React from "react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import { PhotoProvider, PhotoView } from "react-photo-view";
+import "react-photo-view/dist/react-photo-view.css";
+import { Image } from "@nextui-org/react";
+
+function PhotoGear() {
+  return (
+    <PhotoProvider speed={() => 800} maskOpacity={0.9}>
+      <div className="flex justify-center">
+        <Carousel opts={{ align: "start", loop: true }} className="w-full max-w-sm">
+          <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <CarouselItem key={index} className="basis-1/3">
+                <div className="p-1">
+                  <Card className="overflow-hidden">
+                    <CardContent className="flex aspect-square items-center justify-center p-0">
+                      <PhotoView key={index} src={"https://images.squarespace-cdn.com/content/v1/5534618be4b0fc1dd67c939c/1577370803392-9JN065V1O688M09CO2UL/size.jpg"} overlay>
+                        <Image removeWrapper radius="none" className="object-cover h-[100%]" src={"https://images.squarespace-cdn.com/content/v1/5534618be4b0fc1dd67c939c/1577370803392-9JN065V1O688M09CO2UL/size.jpg"} alt={"photo gear"} />
+                      </PhotoView>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="hidden md:block">
+            <CarouselPrevious />
+            <CarouselNext />
+          </div>
+        </Carousel>
+      </div>
+    </PhotoProvider>
+  );
+}
+
+export default PhotoGear;
diff --git a/src/app/photographs/page.tsx b/src/app/photographs/page.tsx
@@ -1,7 +1,8 @@
 import { Metadata } from "next";
-import Gallery from "@/components/Gallery/Gallery";
 import services from "@/services";
-import { Image } from "@nextui-org/react";
+import Gallery from "@/components/Gallery/Gallery";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import PhotoGear from "@/app/photographs/PhotoGear";
 
 export const metadata: Metadata = {
   title: "Gallery | tahsin.us",
@@ -10,19 +11,17 @@ export const metadata: Metadata = {
 
 const Page = async () => {
   const photosFromServer = await services.gallery.getImages();
-  const tahsinWithCameraImg = await services.other.getImage([7]);
+  // const tahsinWithCameraImg = await services.other.getImage([7]);
+  // const src = tahsinWithCameraImg["7"].urls[0];
 
-  const src = tahsinWithCameraImg["7"].urls[0];
   const photographyAboutMe = `As a hobbiest photographer, I love to capture moments, nature, abstract things. I love to play with light, shadow, and composition. My favorite camera make is Sony & current camera: Sony A7 IV, Nikon Z50 & iPhone 15 Pro Max.`;
 
   return (
-    <div className="pb-10">
-      <div className="w-[30%] m-auto">
-        <Image src={src} alt="Tahsin with camera" className="rounded-md" />
-      </div>
+    <div>
+      <PhotoGear />
       <p className="mt-5 text-sm text-center">{photographyAboutMe}</p>
 
-      <div className="divider m-10" />
+      <div className="divider m-5" />
 
       <Gallery photosFromServer={photosFromServer} />
     </div>