Apps revamp

.env.example

@@ -22,6 +22,7 @@
 # Google API key and Calendar ID (required to fetch Calendar events)
 # GOOGLE_API_KEY=
 # GOOGLE_CALENDAR_ID=
+# GOOGLE_SHEET_ID_DAPPS=
 
 # Dune Analytics API key (required for total eth staked)
 # DUNE_API_KEY=

app/[locale]/10years/_components/UserStories/index.tsx

@@ -2,22 +2,15 @@
 
 import { useState } from "react"
 
+import { Story } from "@/lib/types"
+
 import Twitter from "@/components/icons/twitter.svg"
 import { Button, ButtonLink } from "@/components/ui/buttons/Button"
 
 import { cn } from "@/lib/utils/cn"
 
 import { useTranslation } from "@/hooks/useTranslation"
 
-type Story = {
-  name: string
-  storyEnglish: string
-  storyOriginal: string | null
-  twitter?: string
-  country: string
-  date: string
-}
-
 type StoriesProps = {
   stories: Story[]
 }

app/[locale]/apps/[application]/_components/ScreenshotSwiper.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import { useState } from "react"
+
+import { Image } from "@/components/Image"
+import Modal from "@/components/ui/dialog-modal"
+import {
+  Swiper,
+  SwiperContainer,
+  SwiperNavigation,
+  SwiperSlide,
+} from "@/components/ui/swiper"
+
+import { trackCustomEvent } from "@/lib/utils/matomo"
+
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+
+interface ScreenshotSwiperProps {
+  screenshots: string[]
+  appName: string
+}
+
+const ScreenshotSwiper = ({ screenshots, appName }: ScreenshotSwiperProps) => {
+  const lazyPreloadPrevNext = useBreakpointValue({ base: 1, sm: 2, md: 4 })
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [currentImageIndex, setCurrentImageIndex] = useState<number | null>(
+    null
+  )
+
+  const handleImageClick = (index: number) => {
+    setCurrentImageIndex(index)
+    setIsModalOpen(true)
+  }
+
+  return (
+    <SwiperContainer>
+      <Swiper
+        slidesPerView="auto"
+        spaceBetween={16}
+        lazyPreloadPrevNext={lazyPreloadPrevNext}
+      >
+        {screenshots.map((screenshot, index) => (
+          <SwiperSlide key={index} className="!w-auto">
+            <Image
+              src={screenshot}
+              alt={`Screenshot ${index + 1} of ${appName} showing the application interface`}
+              width={300}
+              height={600}
+              sizes="(max-width: 640px) 150px, (max-width: 1024px) 200px, 250px"
+              className="h-[200px] w-auto cursor-pointer rounded-lg object-contain transition-transform hover:scale-105 md:h-[350px]"
+              onClick={() => {
+                handleImageClick(index)
+                trackCustomEvent({
+                  eventCategory: "detail",
+                  eventAction: "gallery_open",
+                  eventName: `app name ${appName}`,
+                })
+              }}
+            />
+          </SwiperSlide>
+        ))}
+        <SwiperNavigation />
+      </Swiper>
+
+      <Modal
+        open={isModalOpen}
+        onOpenChange={(open) => {
+          setIsModalOpen(open)
+          if (!open) {
+            setCurrentImageIndex(null)
+          }
+        }}
+        size="xl"
+        title={`${appName} Screenshots`}
+        contentProps={{
+          className: "max-w-[95vw] max-h-[95vh] p-2 md:p-8",
+        }}
+      >
+        <div className="relative">
+          <SwiperContainer>
+            <Swiper
+              slidesPerView={1}
+              spaceBetween={0}
+              initialSlide={currentImageIndex ?? 0}
+            >
+              {screenshots.map((screenshot, index) => (
+                <SwiperSlide key={index} className="!w-full">
+                  <div className="flex items-center justify-center">
+                    <Image
+                      src={screenshot}
+                      alt={`Screenshot ${index + 1} of ${appName}`}
+                      width={800}
+                      height={1200}
+                      sizes="(max-width: 768px) 90vw, (max-width: 1024px) 80vw, 70vw"
+                      className="max-h-[60vh] w-auto rounded-lg object-contain md:max-h-[70vh]"
+                    />
+                  </div>
+                </SwiperSlide>
+              ))}
+              <SwiperNavigation />
+            </Swiper>
+          </SwiperContainer>
+        </div>
+      </Modal>
+    </SwiperContainer>
+  )
+}
+
+export default ScreenshotSwiper