feat: bruk card for thumbnails i komponentoversikten

closes #4781

Author: piofinn

ny-portal/src/app/(frontend)/komponenter/ComponentCard.tsx

@@ -1,8 +1,9 @@
+import { client } from "@/sanity/client";
+import { componentCardQuery } from "@/sanity/queries/component";
 import imageUrlBuilder from "@sanity/image-url";
 import NextLink from "next/link";
+import { ComponentThumbnail } from "./ComponentThumbnail";
 import styles from "./komponenter.module.scss";
-import { client } from "@/sanity/client";
-import { componentCardQuery } from "@/sanity/queries/component";
 
 type Props = {
     componentSlug: string;
@@ -91,13 +92,12 @@ export const ComponentCard = async ({ componentSlug }: Props) => {
             aria-label={component.name || "Gå til komponent"}
             aria-describedby={`${component.name}-description`}
         >
-            <picture className={styles.image}>
-                <source
-                    media="(prefers-color-scheme: dark)"
-                    srcSet={imageDarkUrl}
+            {imageDarkUrl && imageLightUrl ? (
+                <ComponentThumbnail
+                    darkImage={imageDarkUrl}
+                    lightImage={imageLightUrl}
                 />
-                <img className={styles.image} src={imageLightUrl} alt="" />
-            </picture>
+            ) : null}
             <p className={styles.name}>{component.name}</p>
             <p
                 className={styles.description}

ny-portal/src/app/(frontend)/komponenter/ComponentThumbnail.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { Card, CardImage } from "@fremtind/jokul";
+import styles from "./komponenter.module.scss";
+
+type Props = {
+    lightImage: string;
+    darkImage: string;
+};
+
+export function ComponentThumbnail({ darkImage, lightImage }: Props) {
+    return (
+        <Card variant="high" className={styles.image}>
+            <picture>
+                <source
+                    media="(prefers-color-scheme: dark)"
+                    srcSet={darkImage}
+                />
+                <CardImage as="img" placement="top" src={lightImage} alt="" />
+            </picture>
+        </Card>
+    );
+}

ny-portal/src/app/(frontend)/komponenter/komponenter.module.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
 @use "@fremtind/jokul/styles/core/jkl";
 
 .pageTitle {
@@ -25,7 +26,17 @@
     margin: 0;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: jkl.$spacing-24;
+    column-gap: clamp(
+        var(--jkl-unit-10),
+        0.4038rem + 0.3846vw,
+        var(--jkl-unit-15)
+    );
+
+    row-gap: clamp(
+        var(--jkl-unit-30),
+        1.1154rem + 1.5385vw,
+        var(--jkl-unit-50)
+    );
     container-type: inline-size;
 
     &.listView {
@@ -40,9 +51,12 @@
 }
 
 .componentCard {
+    --aspect-ratio: 1.5;
+
     display: grid;
     grid-template-columns: 1fr;
-    gap: var(--jkl-unit-30);
+    gap: clamp(var(--jkl-unit-10), 0.3077rem + 0.7692vw, var(--jkl-unit-20));
+    box-sizing: border-box;
     width: 100%;
     text-decoration: none;
     color: var(--color-text);
@@ -120,10 +134,11 @@
     }
 
     .image {
-        width: 100%;
-        height: auto;
-        object-fit: cover;
-        border-radius: var(--jkl-spacing-16);
-        aspect-ratio: 1.6;
+        aspect-ratio: var(--aspect-ratio);
+
+        img {
+            object-fit: cover;
+            aspect-ratio: var(--aspect-ratio);
+        }
     }
 }