Started with a simple homepage

src/components/card.tsx

@@ -0,0 +1,23 @@
+/* @refresh reload */
+import { type Component } from "solid-js";
+import type { CardProps } from "../types/interfaces";
+import { H3 } from "./text";
+import { A } from "./link";
+
+const Card: Component<CardProps> = ({ children, className, title, to, newTab = false }) => {
+    return (
+        <>
+            <A className={"text-white"} to={ to } newTab={ newTab }>
+                <div
+                    class={ `relative bg-gradient-to-r from-cyan-600 to-cyan-500 min-w-64 rounded-2xl ${ className }` }>
+                    <div class="relative p-5">
+                        <H3 className={ "text-center" }>{ title }</H3>
+                        { children }
+                    </div>
+                </div>
+            </A>
+        </>
+    );
+};
+
+export default Card;

src/components/header.tsx

@@ -0,0 +1,18 @@
+/* @refresh reload */
+
+import { Component } from "solid-js";
+import { SimpleProps, TitleProps } from "../types/interfaces";
+import { H1 } from "./text";
+
+const Header: Component<TitleProps> = ({ className, title }) => {
+    return (
+        <header class={ className }>
+            <H1 className={ "text-center" }>{ title }</H1>
+            <div class={"mx-auto w-fit"}>
+                <p>Av Martin Berg Alstad</p>
+            </div>
+        </header>
+    );
+};
+
+export default Header;

src/components/layout.tsx

@@ -0,0 +1,17 @@
+/* @refresh reload */
+import { type Component } from "solid-js";
+import type { TitleProps } from "../types/interfaces";
+import Header from "./header";
+
+export const Layout: Component<TitleProps> = ({ children, title, className }) => {
+    return (
+        <div class={ `bg-default-bg text-white min-h-screen font-mono ${ className }` }>
+            <div class="container mx-auto debug">
+                <Header className={"my-3"} title={ title } />
+                <main>
+                    { children }
+                </main>
+            </div>
+        </div>
+    );
+};

src/components/link.tsx

@@ -1,5 +1,6 @@
-import { Component, JSX } from "solid-js";
-import { LinkProps } from "../types/interfaces";
+/* @refresh reload */
+import { type Component } from "solid-js";
+import type { LinkProps } from "../types/interfaces";
 
 export const A: Component<LinkProps> = (
     {
@@ -9,7 +10,7 @@ export const A: Component<LinkProps> = (
         className,
         id,
         newTab = true,
-    }): JSX.Element => {
+    }) => {
     return (
         <a href={ to } id={ id }
            rel={ `${ rel } ${ newTab ? "noreferrer" : undefined }` }

src/components/text.tsx

@@ -0,0 +1,18 @@
+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

@@ -4,6 +4,11 @@
 
 @layer components {
 
+    .debug {
+        @apply border border-red-500;
+        @apply after:content-['DEBUG'] after:absolute;
+    }
+
     .link {
         @apply hover:underline text-blue-500;
     }

src/index.tsx

@@ -1,14 +1,36 @@
 /* @refresh reload */
-import { render } from "solid-js/web";
+import { For, render } from "solid-js/web";
 
 import "./index.css";
 import type { Component } from "solid-js";
+import { Layout } from "./components/layout";
+import Card from "./components/card";
+import type { CardProps } from "./types/interfaces";
+
+const cards = [
+    {
+        title: "API-er",
+        children: <p>Sjekk ut mine API-er</p>,
+        to: "https://api.martials.no/",
+    },
+    {
+        title: "Hjemmeside",
+        children: <p>Sjekk ut mine andre prosjekter</p>,
+        to: "https://h600878.github.io/",
+    }
+] satisfies CardProps[];
 
 const HomePage: Component = () => {
     return (
-        <>
-            <p class="text-4xl text-green-700 text-center py-20">Hello tailwind!</p>
-        </>
+        <Layout title={ "Velkommen!" }>
+            <div class={ "flex justify-center mt-10" }>
+                <For each={ cards }>
+                    { card =>
+                        <Card title={ card.title } className={ "m-4" } to={ card.to }>{ card.children }</Card>
+                    }
+                </For>
+            </div>
+        </Layout>
     );
 };
 

src/types/interfaces.ts

@@ -1,13 +1,25 @@
 import { JSX } from "solid-js";
 
-export interface ChildProps {
-    children?: JSX.Element,
+export interface SimpleProps {
     className?: string,
+    style?: JSX.CSSProperties,
     id?: string,
 }
 
+export interface ChildProps extends SimpleProps {
+    children?: JSX.Element,
+}
+
 export interface LinkProps extends ChildProps {
     to?: string,
     rel?: string,
     newTab?: boolean,
+}
+
+export interface TitleProps extends ChildProps {
+    title: string,
+}
+
+export interface CardProps extends LinkProps {
+    title: string;
 }