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>
+        </>
+    );
+};