add tappable images

src/components/modules/PictureCarousel.tsx

@@ -6,7 +6,11 @@ const images = [
   "https://storage.alexav.gg/content/2f36c1dd-eaf8-4fd3-a3cd-1d25fe8f5a07.jpg",
 ];
 
-export default function PictureCarousel() {
+export default function PictureCarousel({
+  onClick,
+}: {
+  onClick: (url: string) => void;
+}) {
   return (
     <div className="border border-white border-solid rounded-lg p-2">
       <div className="whitespace-nowrap overflow-x-auto">
@@ -15,6 +19,7 @@ export default function PictureCarousel() {
             return (
               <img
                 key={k}
+                onClick={() => onClick(v)}
                 src={v}
                 className="inline w-[200px] max-h-[100px] object-cover"
               />

src/pages/App.tsx

@@ -10,9 +10,22 @@ import MusicComponent from "../components/info/MusicComponent";
 
 export default function App() {
   const [tab, setTab] = useState<string>("home");
+  const [overlayImage, setOverlayImage] = useState<string | null>(null);
 
   return (
     <Layout>
+      {overlayImage && (
+        <div className="absolute min-h-screen min-w-screen bg-black/75">
+          <div className="flex justify-center items-center h-screen">
+            <img
+              onClick={() => setOverlayImage(null)}
+              className="w-[400px]"
+              src={overlayImage}
+            />
+          </div>
+        </div>
+      )}
+
       <div className="min-h-screen flex justify-center items-center">
         <div className="border-3 bg-[#ebebeb] border-black w-full sm:w-[500px]">
           <div className="] text-black">
@@ -164,7 +177,9 @@ export default function App() {
             </div>
           </div>
           {tab === "fantasy" && <FantasyStatus />}
-          {tab === "pictures" && <PictureCarousel />}
+          {tab === "pictures" && (
+            <PictureCarousel onClick={(url: string) => setOverlayImage(url)} />
+          )}
           {tab === "scores" && <ScoreModule type="sabres" />}
         </div>
       </div>