Added list of apis to card, changed link to only cover headline

src/components/card.tsx

@@ -1,21 +1,21 @@
 /* @refresh reload */
 import { type Component } from "solid-js";
 import type { CardProps } from "../types/interfaces";
-import { H3 } from "./text";
 import { Link } from "./link";
 
 const Card: Component<CardProps> = ({ children, className, title, to, newTab = false }) => {
     return (
         <>
-            <Link className={ "text-white" } to={ to } newTab={ newTab }>
+            <div
-                <div
+                class={ `relative bg-gradient-to-r from-cyan-600 to-cyan-500 h-32 w-72 rounded-2xl ${ className }` }>
-                    class={ `relative bg-gradient-to-r from-cyan-600 to-cyan-500 h-32 w-64 rounded-2xl ${ className }` }>
+                <div class="relative p-5">
-                    <div class="relative p-5">
+                    <Link className={ "text-white" } to={ to } newTab={ newTab }>
-                        <H3 className={ "text-center" }>{ title }</H3>
+                        <h3 class={ "text-center w-fit mx-auto before:content-['↗']" }>{ title }</h3>
-                        { children }
+                    </Link>
-                    </div>
+                    { children }
                 </div>
-            </Link>
+            </div>
+
         </>
     );
 };

src/components/header.tsx

@@ -2,12 +2,11 @@
 
 import { type Component } from "solid-js";
 import type { TitleProps } from "../types/interfaces";
-import { H1 } from "./text";
 
 const Header: Component<TitleProps> = ({ className, title }) => {
     return (
         <header class={ className }>
-            <H1 className={ "text-center text-cyan-500" }>{ title }</H1>
+            <h1 class={ "text-center text-cyan-500" }>{ title }</h1>
             <div class={"mx-auto w-fit"}>
                 <p>Av Martin Berg Alstad</p>
             </div>

src/components/text.tsx

@@ -1,10 +0,0 @@
-import { type Component } from "solid-js";
-import type { ChildProps } from "../types/interfaces";
-
-export const H1: Component<ChildProps> = ({ children, className }) => {
-    return <h1 class={ `text-4xl ${ className }` }>{ children }</h1>;
-};
-
-export const H3: Component<ChildProps> = ({ children, className }) => {
-    return <h3 class={ `text-2xl ${ className }` }>{ children }</h3>;
-};

src/index.css

@@ -9,8 +9,28 @@
         @apply after:content-['DEBUG'] after:absolute;
     }
 
-    .link {
+    h1 {
+        @apply text-4xl;
+    }
+
+    h2 {
+        @apply text-3xl;
+    }
+
+    h3 {
+        @apply text-2xl;
+    }
+
+    h4 {
+        @apply text-xl;
+    }
+
+    a {
         @apply hover:underline text-cyan-500;
     }
 
+    li {
+        @apply list-disc ml-4;
+    }
+
 }

src/index.tsx

@@ -6,12 +6,24 @@ import { type Component } from "solid-js";
 import Layout from "./components/layout";
 import Card from "./components/card";
 import type { CardProps } from "./types/interfaces";
+import { Link } from "./components/link";
+
+const apiRoot = "https://api.martials.no";
 
 const cards = [
     {
         title: "API-er",
-        children: <p>Sjekk ut mine API-er</p>,
+        children: <>
-        to: "https://api.martials.no/",
+            <p>Sjekk ut mine API-er</p>
+            <ul>
+                <li>
+                    <Link className={ "text-white" } to={ `${ apiRoot }/simplify_truths` }>
+                        Forenkle sannhetsverdier
+                    </Link>
+                </li>
+            </ul>
+        </>,
+        to: apiRoot,
     },
     {
         title: "Hjemmeside",
@@ -26,7 +38,7 @@ const HomePage: Component = () => {
             <div class={ "flex flex-wrap justify-center mt-10" }>
                 <For each={ cards }>
                     { card =>
-                        <Card title={ card.title } className={ "m-4 text-center" } to={ card.to }>{ card.children }</Card>
+                        <Card title={ card.title } className={ "m-4" } to={ card.to }>{ card.children }</Card>
                     }
                 </For>
             </div>