refactor(tattoos): add tattoolist component and remove parallaxscroll…

… and artistgallery components

frontend/src/app/(routes)/artists/[slug]/page.tsx

@@ -4,7 +4,7 @@ import { Button, Chip } from "@nextui-org/react";
 
 import { DEFAULT_IMAGE } from "@/config/constants";
 import { getArtist, getTattoosByArtist } from "@/lib/api";
-import { Instagram, EmptyList, WhatsApp, ArtistGallery } from "@/components";
+import { Instagram, EmptyList, WhatsApp, TattooList } from "@/components";
 import { IStyle } from "@/interfaces";
 import Link from "next/link";
 
@@ -107,7 +107,7 @@ export default async function ArtistDetailPage({ params }: Props) {
       </section>
       <section className="w-full p-4">
         {hasTattoos ? (
-          <ArtistGallery tattoos={tattoos} />
+          <TattooList tattoos={tattoos} className="md:grid-cols-3" />
         ) : (
           <EmptyList content="Tattoos" />
         )}

frontend/src/components/company/tattoo-section/TattooList.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { useAnimateOnView } from "@/hooks";
+import { ITattoo } from "@/interfaces";
+import { Chip } from "@nextui-org/react";
+
+interface Props {
+  tattoos: ITattoo[];
+  className?: string;
+}
+
+export const TattooList = ({ tattoos, className }: Props) => {
+  const { ref, controls, itemVariants } = useAnimateOnView(0.1, false);
+
+  return (
+    <section
+      className={`${className}
+        grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4`}
+      ref={ref}
+    >
+      {tattoos.map((tattoo, idx) => (
+        <motion.figure
+          key={tattoo.id}
+          className="relative border border-neutral-darkgrey rounded-xl overflow-hidden group"
+          variants={itemVariants}
+          initial="hidden"
+          animate={controls}
+          transition={{
+            duration: 0.3,
+            delay: idx * 0.1,
+            ease: "easeOut",
+          }}
+        >
+          <figure className="relative w-full h-0 pb-[100%]">
+            <Image
+              src={tattoo.image}
+              alt={tattoo.name}
+              fill
+              className="z-10 transform transition-transform duration-300 group-hover:scale-110 grayscale group-hover:grayscale-0"
+            />
+          </figure>
+          <Chip
+            variant="flat"
+            size="sm"
+            className="invisible group-hover:visible transition-all duration-100 text-xs rounded-sm absolute z-30 bottom-2 left-2 shadow-xl"
+          >
+            {tattoo.name}
+          </Chip>
+        </motion.figure>
+      ))}
+    </section>
+  );
+};

frontend/src/components/company/tattoo-section/TattooSection.tsx

@@ -1,5 +1,4 @@
-import { TATTOO_EXAMPLE_OBJ } from "@/config/constants";
-import { HeaderSection, ParallaxScrollMain } from "@/components";
+import { HeaderSection, TattooList } from "@/components";
 import { ITattoo } from "@/interfaces";
 
 interface Props {
@@ -8,9 +7,9 @@ interface Props {
 
 export const TattooSection = ({ tattoos }: Props) => {
   return (
-    <section className="py-16">
+    <section className="py-16 px-4">
       <HeaderSection title="Tattoos" />
-      <ParallaxScrollMain tattoos={tattoos} />
+      <TattooList tattoos={tattoos} />
     </section>
   );
 };

frontend/src/components/index.ts

@@ -2,10 +2,8 @@
 export * from "./applicants/applicant-form/ApplicantForm";
 
 // Artists
-export * from "./artists/artist-card/ArtistCard";
 export * from "./artists/artist-list/ArtistList";
 export * from "./artists/artist-section/ArtistSection";
-export * from "./artists/artist-gallery/ArtistGallery";
 
 // Bookings
 export * from "./bookings/booking-card/BookingCard";
@@ -22,6 +20,7 @@ export * from "./company/price-section/PriceSection";
 export * from "./company/promotion-section/PromotionSection";
 export * from "./company/service-section/ServiceSection";
 export * from "./company/tattoo-section/TattooSection";
+export * from "./company/tattoo-section/TattooList";
 
 // Products
 export * from "./products/product-counter/ProductCounter";
@@ -45,8 +44,6 @@ export * from "./ui/instagram/Instagram";
 export * from "./ui/logo/Logo";
 export * from "./ui/menubar/MenuBar";
 export * from "./ui/pagination/PaginationItem";
-export * from "./ui/parallax-scroll/ParallaxScroll";
-export * from "./ui/parallax-scroll/ParallaxScrollMain";
 export * from "./ui/twitch/Twitch";
 export * from "./ui/whatsapp/WhatsApp";
 export * from "./ui/whatsapp/WhatsAppButton";