From 0c0ee849a630f125a8f08c10ee71dfdbc6b7c7ce Mon Sep 17 00:00:00 2001
From: schererleander <leander@schererleander.de>
Date: Fri, 27 Jun 2025 00:42:58 +0200
Subject: chore

---
 src/components/Card.tsx             |  82 +++++++++++++++++++++++++++++
 src/components/CardLink.tsx         |  82 -----------------------------
 src/components/Gallery.tsx          | 100 ++++++++++++++++++++++++++++++++++++
 src/components/ImageGalleryGrid.tsx | 100 ------------------------------------
 4 files changed, 182 insertions(+), 182 deletions(-)
 create mode 100644 src/components/Card.tsx
 delete mode 100644 src/components/CardLink.tsx
 create mode 100644 src/components/Gallery.tsx
 delete mode 100644 src/components/ImageGalleryGrid.tsx

(limited to 'src/components')

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 0000000..e71cf33
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,82 @@
+import { useRef, useState } from "react";
+
+function Icon() {
+  return <svg className="no-global w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M18 13v6a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h6M15 6h4m0 0v4m0-4L10 15" /></svg>;
+}
+
+interface Props {
+  title: string;
+  body: string;
+  href?: string;
+  imgSrc?: string;
+}
+
+export default function CardLink({ title, body, href, imgSrc }: Props) {
+  const divRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [opacity, setOpacity] = useState(0);
+
+  const handleMouseMove: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    if (!divRef.current) return;
+    const rect = divRef.current.getBoundingClientRect();
+    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+  };
+
+  const handleMouseEnter = () => setOpacity(0.6);
+  const handleMouseLeave = () => setOpacity(0);
+
+  return (
+    <div
+      ref={divRef}
+      className={`relative flex items-center gap-4 py-2 px-2 rounded-lg border border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 overflow-hidden ${
+        href ? "cursor-pointer" : ""
+      } 
+      [--spotlight-light:rgba(255,255,255,0.1)] 
+      [--spotlight-dark:rgba(0,0,0,0.1)]`}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...(href && {
+        onClick: () => window.open(href, "_blank", "noopener,noreferrer"),
+        role: "link",
+        tabIndex: 0,
+      })}
+    >
+      {/* Spotlight overlay - light */}
+      <div
+        className="absolute inset-0 opacity-0 transition-opacity duration-300 ease-in-out"
+        style={{
+          opacity,
+          background: `radial-gradient(circle at ${position.x}px ${position.y}px, 
+            var(--spotlight-light), 
+            transparent 80%)`,
+        }}
+      />
+      
+      {/* Spotlight overlay - dark mode */}
+      <div
+        className="absolute inset-0 opacity-0 transition-opacity duration-300 ease-in-out dark:block"
+        style={{
+          opacity,
+          background: `radial-gradient(circle at ${position.x}px ${position.y}px, 
+            var(--spotlight-dark), 
+            transparent 80%)`,
+        }}
+      />
+
+      {/* Content */}
+      {imgSrc && (
+        <img 
+          src={imgSrc} 
+          className="w-20 h-20 object-cover rounded-lg" 
+          alt={title}
+        />
+      )}
+      <div className="flex-1">
+        <h3 className="font-medium">{title}</h3>
+        <p className="text-sm text-neutral-800 dark:text-neutral-400">{body}</p>
+      </div>
+      {href && <Icon />}
+    </div>
+  );
+}
diff --git a/src/components/CardLink.tsx b/src/components/CardLink.tsx
deleted file mode 100644
index e71cf33..0000000
--- a/src/components/CardLink.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { useRef, useState } from "react";
-
-function Icon() {
-  return <svg className="no-global w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M18 13v6a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h6M15 6h4m0 0v4m0-4L10 15" /></svg>;
-}
-
-interface Props {
-  title: string;
-  body: string;
-  href?: string;
-  imgSrc?: string;
-}
-
-export default function CardLink({ title, body, href, imgSrc }: Props) {
-  const divRef = useRef<HTMLDivElement>(null);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [opacity, setOpacity] = useState(0);
-
-  const handleMouseMove: React.MouseEventHandler<HTMLDivElement> = (e) => {
-    if (!divRef.current) return;
-    const rect = divRef.current.getBoundingClientRect();
-    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
-  };
-
-  const handleMouseEnter = () => setOpacity(0.6);
-  const handleMouseLeave = () => setOpacity(0);
-
-  return (
-    <div
-      ref={divRef}
-      className={`relative flex items-center gap-4 py-2 px-2 rounded-lg border border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 overflow-hidden ${
-        href ? "cursor-pointer" : ""
-      } 
-      [--spotlight-light:rgba(255,255,255,0.1)] 
-      [--spotlight-dark:rgba(0,0,0,0.1)]`}
-      onMouseMove={handleMouseMove}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      {...(href && {
-        onClick: () => window.open(href, "_blank", "noopener,noreferrer"),
-        role: "link",
-        tabIndex: 0,
-      })}
-    >
-      {/* Spotlight overlay - light */}
-      <div
-        className="absolute inset-0 opacity-0 transition-opacity duration-300 ease-in-out"
-        style={{
-          opacity,
-          background: `radial-gradient(circle at ${position.x}px ${position.y}px, 
-            var(--spotlight-light), 
-            transparent 80%)`,
-        }}
-      />
-      
-      {/* Spotlight overlay - dark mode */}
-      <div
-        className="absolute inset-0 opacity-0 transition-opacity duration-300 ease-in-out dark:block"
-        style={{
-          opacity,
-          background: `radial-gradient(circle at ${position.x}px ${position.y}px, 
-            var(--spotlight-dark), 
-            transparent 80%)`,
-        }}
-      />
-
-      {/* Content */}
-      {imgSrc && (
-        <img 
-          src={imgSrc} 
-          className="w-20 h-20 object-cover rounded-lg" 
-          alt={title}
-        />
-      )}
-      <div className="flex-1">
-        <h3 className="font-medium">{title}</h3>
-        <p className="text-sm text-neutral-800 dark:text-neutral-400">{body}</p>
-      </div>
-      {href && <Icon />}
-    </div>
-  );
-}
diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx
new file mode 100644
index 0000000..ffcf0e1
--- /dev/null
+++ b/src/components/Gallery.tsx
@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+
+interface ImageItems {
+  images: Array<{
+    src: string;
+    alt?: string;
+    id?: string | number;
+  }>;
+}
+
+export default function Gallery({ images }: ImageItems) {
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const closeModal = () => setSelectedIndex(null);
+  const prev = (e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    setSelectedIndex((i) => (i !== null && i > 0 ? i - 1 : i));
+  };
+  const next = (e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    setSelectedIndex((i) => (i !== null && i < images.length - 1 ? i + 1 : i));
+  };
+
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (selectedIndex === null) return;
+      if (event.key === 'ArrowLeft') {
+        prev();
+      } else if (event.key === 'ArrowRight') {
+        next();
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [selectedIndex, images.length]);
+
+  return (
+    <>
+      <div className="grid gap-2 grid-cols-4 max-sm:grid-cols-3 p-4">
+        {images.map((image, idx) => (
+          <button
+            key={image.id ?? image.src}
+            className="relative overflow-hidden rounded-xl shadow-lg aspect-square group cursor-pointer"
+            onClick={() => setSelectedIndex(idx)}
+          >
+            <img
+              src={image.src}
+              alt={image.alt || 'Gallery image'}
+              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+            />
+          </button>
+        ))}
+      </div>
+
+      {/* Overlay */}
+      {selectedIndex !== null && (
+        <div
+          className="fixed inset-0 bg-white/50 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
+          onClick={closeModal}
+          role="dialog"
+          aria-modal="true"
+        >
+          {/* Prev arrow */}
+          <button
+            onClick={prev}
+            className="absolute left-4 text-black dark:text-white text-4xl disabled:opacity-30"
+            disabled={selectedIndex === 0}
+          >
+            &#8592;
+          </button>
+
+          <img
+            src={images[selectedIndex].src}
+            alt={images[selectedIndex].alt || 'Enlarged gallery'}
+            className="w-2/3 h-2/3 object-contain rounded-lg"
+          />
+
+          {/* Next arrow */}
+          <button
+            onClick={next}
+            className="absolute right-4 text-black dark:text-white text-4xl disabled:opacity-30"
+            disabled={selectedIndex === images.length - 1}
+            aria-label='Next image'
+          >
+            &#8594;
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              closeModal();
+            }}
+            className="absolute top-4 right-4 text-black dark:text-white text-3xl"
+          >
+            &times;
+          </button>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/ImageGalleryGrid.tsx b/src/components/ImageGalleryGrid.tsx
deleted file mode 100644
index 0b657cf..0000000
--- a/src/components/ImageGalleryGrid.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-interface ImageItems {
-  images: Array<{
-    src: string;
-    alt?: string;
-    id?: string | number;
-  }>;
-}
-
-export default function ImageGalleryGrid({ images }: ImageItems) {
-  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
-  const closeModal = () => setSelectedIndex(null);
-  const prev = (e?: React.MouseEvent) => {
-    e?.stopPropagation();
-    setSelectedIndex((i) => (i !== null && i > 0 ? i - 1 : i));
-  };
-  const next = (e?: React.MouseEvent) => {
-    e?.stopPropagation();
-    setSelectedIndex((i) => (i !== null && i < images.length - 1 ? i + 1 : i));
-  };
-
-  useEffect(() => {
-    function handleKeyDown(event: KeyboardEvent) {
-      if (selectedIndex === null) return;
-      if (event.key === 'ArrowLeft') {
-        prev();
-      } else if (event.key === 'ArrowRight') {
-        next();
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [selectedIndex, images.length]);
-
-  return (
-    <>
-      <div className="grid gap-2 grid-cols-4 max-sm:grid-cols-3 p-4">
-        {images.map((image, idx) => (
-          <button
-            key={image.id ?? image.src}
-            className="relative overflow-hidden rounded-xl shadow-lg aspect-square group cursor-pointer"
-            onClick={() => setSelectedIndex(idx)}
-          >
-            <img
-              src={image.src}
-              alt={image.alt || 'Gallery image'}
-              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-            />
-          </button>
-        ))}
-      </div>
-
-      {/* Overlay */}
-      {selectedIndex !== null && (
-        <div
-          className="fixed inset-0 bg-white/50 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
-          onClick={closeModal}
-          role="dialog"
-          aria-modal="true"
-        >
-          {/* Prev arrow */}
-          <button
-            onClick={prev}
-            className="absolute left-4 text-black dark:text-white text-4xl disabled:opacity-30"
-            disabled={selectedIndex === 0}
-          >
-            &#8592;
-          </button>
-
-          <img
-            src={images[selectedIndex].src}
-            alt={images[selectedIndex].alt || 'Enlarged gallery'}
-            className="w-2/3 h-2/3 object-contain rounded-lg"
-          />
-
-          {/* Next arrow */}
-          <button
-            onClick={next}
-            className="absolute right-4 text-black dark:text-white text-4xl disabled:opacity-30"
-            disabled={selectedIndex === images.length - 1}
-            aria-label='Next image'
-          >
-            &#8594;
-          </button>
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              closeModal();
-            }}
-            className="absolute top-4 right-4 text-black dark:text-white text-3xl"
-          >
-            &times;
-          </button>
-        </div>
-      )}
-    </>
-  );
-}
-- 
cgit v1.3.1