feat(apps/earth): adds root page and implements daisyui

apps/earth/package.json

@@ -33,7 +33,8 @@
     "@types/node": "^18.11.18",
     "@typescript-eslint/eslint-plugin": "^5.48.1",
     "@typescript-eslint/parser": "^5.48.1",
-    "autoprefixer": "10.4.11",
+    "autoprefixer": "^10.4.11",
+    "daisyui": "^2.50.0",
     "eslint": "^8.31.0",
     "eslint-plugin-qwik": "^0.16.2",
     "espree": "^9.4.1",

apps/earth/src/components/button/BaseButton.tsx

@@ -1,17 +1,39 @@
-import { ClassSlot, component$, HTMLAttributes, Slot } from "@builder.io/qwik";
+import {
+  ClassSlot,
+  component$,
+  HTMLAttributes,
+  Slot,
+  useSignal,
+} from "@builder.io/qwik";
 
 export interface BaseButtonProps extends HTMLAttributes<HTMLButtonElement> {
   class?: ClassSlot;
+  color?: "primary" | "secondary" | "accent";
+  size?: "xs" | "sm" | "md" | "lg";
 }
 
-export const BaseButton = component$<BaseButtonProps>((props) => {
-  return (
-    <button {...props} class={["py-2 px-3", props.class]}>
-      <span>
+export const BaseButton = component$<BaseButtonProps>(
+  ({ color = "primary", size = "md", ...props }) => {
+    const classes = useSignal({
+      primary: "btn-primary",
+      secondary: "btn-secondary",
+      accent: "btn-accent",
+
+      xs: "btn-xs",
+      sm: "btn-sm",
+      md: "btn-md",
+      lg: "btn-lg",
+    });
+
+    return (
+      <button
+        {...props}
+        class={["btn", classes.value[color], classes.value[size], props.class]}
+      >
         <Slot />
-      </span>
-    </button>
-  );
-});
+      </button>
+    );
+  },
+);
 
 export default BaseButton;

apps/earth/src/components/button/Button.tsx

@@ -0,0 +1,25 @@
+import { component$, Slot, useSignal } from "@builder.io/qwik";
+import { BaseButton, BaseButtonProps } from "./BaseButton";
+
+export interface ButtonProps extends BaseButtonProps {
+  variant?: "contained" | "outlined" | "ghost";
+}
+
+export const Button = component$<ButtonProps>(
+  ({ variant = "contained", ...props }) => {
+    const classes = useSignal({
+      contained: undefined,
+      outlined: "btn-outlined",
+      ghost: "btn-ghost",
+    });
+
+    return (
+      <BaseButton
+        {...props}
+        class={["btn", classes.value[variant], props.class]}
+      >
+        <Slot />
+      </BaseButton>
+    );
+  },
+);

apps/earth/src/components/button/IconButton.tsx

@@ -0,0 +1,24 @@
+import { component$, Slot, useSignal } from "@builder.io/qwik/core";
+import { BaseButton, BaseButtonProps } from "./BaseButton";
+
+export interface IconButtonProps extends BaseButtonProps {
+  variant?: "circle" | "square";
+}
+
+export const IconButton = component$<IconButtonProps>(
+  ({ variant = "circle", ...props }) => {
+    const classes = useSignal({
+      circle: "btn-circle",
+      square: "btn-square",
+    });
+
+    return (
+      <BaseButton
+        {...props}
+        class={["btn", classes.value[variant], props.class]}
+      >
+        <Slot />
+      </BaseButton>
+    );
+  },
+);

apps/earth/src/components/button/index.ts

@@ -1 +1 @@
-export * from "./BaseButton";
+export * from "./Button";

apps/earth/src/components/footer/Footer.tsx

@@ -2,10 +2,8 @@ import { component$ } from "@builder.io/qwik";
 
 export const Footer = component$(() => {
   return (
-    <footer>
+    <footer class="prose prose-sm py-4 px-8 font-mono">
       <a href="/">Made with ♡ by Deopea</a>
     </footer>
   );
 });
-
-export default Footer;

apps/earth/src/components/head/Head.tsx

@@ -37,5 +37,3 @@ export const Head = component$(() => {
     </head>
   );
 });
-
-export default Head;

apps/earth/src/components/header/Header.tsx

@@ -1,26 +1,26 @@
 import { component$ } from "@builder.io/qwik";
-import { useNavigate } from "@builder.io/qwik-city";
-import { BaseButton } from "components/button";
+import { Button } from "components/button";
+import { Link } from "components/link";
+import { LinkButton } from "components/link/LinkButton";
 
 export const Header = component$(() => {
-  const navigate = useNavigate();
   return (
-    <header class="p-2 flex">
-      <div class="flex-1">
-        <a onClick$={() => navigate("/")} href="/">
+    <header class="navbar flex py-4 px-8 font-mono">
+      <div class="navbar-start">
+        <Link class="font-mono uppercase" href="/">
           deopea
-        </a>
+        </Link>
       </div>
-      <nav class="flex justify-between space-x-2">
-        <a>What we do</a>
-        <a>About Us</a>
-        <a>The Team</a>
+      <nav class="navbar-center hidden md:block">
+        <LinkButton class="btn-sm">What we do</LinkButton>
+        <LinkButton class="btn-sm">About Us</LinkButton>
+        <LinkButton class="btn-sm">The Team</LinkButton>
       </nav>
-      <div class="flex-1 flex justify-end">
-        <BaseButton>Contact Us</BaseButton>
+      <div class="navbar-end">
+        <Button variant="outlined" size="sm">
+          Contact Us
+        </Button>
       </div>
     </header>
   );
 });
-
-export default Header;

apps/earth/src/components/link/Link.tsx

@@ -0,0 +1,17 @@
+import { ClassSlot, component$, Slot } from "@builder.io/qwik";
+import {
+  Link as QCLink,
+  LinkProps as QCLinkProps,
+} from "@builder.io/qwik-city";
+
+export interface LinkProps extends QCLinkProps {
+  class?: ClassSlot;
+}
+
+export const Link = component$<LinkProps>((props) => {
+  return (
+    <QCLink {...props} class={["link link-hover", props.class]}>
+      <Slot />
+    </QCLink>
+  );
+});

apps/earth/src/components/link/LinkButton.tsx

@@ -0,0 +1,14 @@
+import { ClassSlot, component$, Slot } from "@builder.io/qwik";
+import { Link, LinkProps } from "@builder.io/qwik-city";
+
+export interface LinkButtonProps extends LinkProps {
+  class?: ClassSlot;
+}
+
+export const LinkButton = component$<LinkButtonProps>((props) => {
+  return (
+    <Link {...props} class={["btn btn-ghost", props.class]}>
+      <Slot />
+    </Link>
+  );
+});

apps/earth/src/components/link/index.ts

@@ -0,0 +1 @@
+export * from "./Link";

apps/earth/src/global.css

@@ -5,6 +5,7 @@
  * the styles in here will be applied to the Document, without any sort of CSS scoping.
  *
  */
+
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

apps/earth/src/root.tsx

@@ -4,7 +4,7 @@ import {
   RouterOutlet,
   ServiceWorkerRegister,
 } from "@builder.io/qwik-city";
-import Head from "components/head/Head";
+import { Head } from "components/head";
 import globalStyles from "./global.css?inline";
 
 export default component$(() => {

apps/earth/src/routes/index.tsx

@@ -3,8 +3,8 @@ import type { DocumentHead } from "@builder.io/qwik-city";
 
 export default component$(() => {
   return (
-    <div>
-      <h1 class="prose prose-h1">Welcome to Deopea!</h1>
+    <div class="mx-8 min-h-screen md:container md:mx-auto md:px-8">
+      <div class="hero"></div>
     </div>
   );
 });

apps/earth/src/routes/layout.tsx

@@ -5,11 +5,9 @@ import { Header } from "components/header";
 export default component$(() => {
   return (
     <>
+      <Header />
       <main>
-        <Header />
-        <section>
-          <Slot />
-        </section>
+        <Slot />
       </main>
       <Footer />
     </>

apps/earth/tailwind.config.cjs

@@ -1,55 +1,67 @@
 const defaultTheme = require("tailwindcss/defaultTheme");
-const typographyPlugin = require("@tailwindcss/typography");
 
 /**
  * @type {import('tailwindcss').Config}
  */
 module.exports = {
   content: ["./src/**/*.{ts,tsx,mdx}"],
-  plugins: [typographyPlugin],
+  plugins: [require("@tailwindcss/typography"), require("daisyui")],
+  daisyui: {
+    themes: [
+      {
+        deopea: {
+          "primary": "#0EA3F4",
+          "secondary": "#FB2576",
+          "accent": "#3F0071",
+          "base-100": "#010101",
+          "error": "#93000A",
+        },
+      },
+    ],
+  },
   theme: {
     extend: {
       fontFamily: {
         mono: ["Space Mono", ...defaultTheme.fontFamily.mono],
         sans: ["Quicksand", ...defaultTheme.fontFamily.sans],
       },
-      colors: {
-        primary: {
-          "default": "#ffb3af",
-          "fg": "#660710",
-          "container": "#852123",
-          "container-fg": "#ffdad7",
-        },
-        secondary: {
-          "default": "#e7bdba",
-          "fg": "#442928",
-          "container": "#5d3f3d",
-          "container-fg": "#ffdad7",
-        },
-        tertiary: {
-          "default": "#e2c28c",
-          "fg": "#402d05",
-          "container": "#594319",
-          "container-fg": "#ffdea8",
-        },
-        error: {
-          "default": "#ffb4ab",
-          "fg": "#93000a",
-          "container": "#690005",
-          "container-fg": "#ffdad6",
-        },
-        bg: {
-          default: "#201a1a",
-          fg: "#ede0de",
-        },
-        surface: {
-          "default": "#201a1a",
-          "fg": "#ede0de",
-          "variant": "#534342",
-          "variant-fg": "#d8c2c0",
-        },
-        outline: "#a08c8b",
-      },
+      // colors: {
+      //   primary: {
+      //     "default": "#ffb3af",
+      //     "fg": "#660710",
+      //     "container": "#852123",
+      //     "container-fg": "#ffdad7",
+      //   },
+      //   secondary: {
+      //     "default": "#e7bdba",
+      //     "fg": "#442928",
+      //     "container": "#5d3f3d",
+      //     "container-fg": "#ffdad7",
+      //   },
+      //   tertiary: {
+      //     "default": "#e2c28c",
+      //     "fg": "#402d05",
+      //     "container": "#594319",
+      //     "container-fg": "#ffdea8",
+      //   },
+      //   error: {
+      //     "default": "#ffb4ab",
+      //     "fg": "#93000a",
+      //     "container": "#690005",
+      //     "container-fg": "#ffdad6",
+      //   },
+      //   bg: {
+      //     default: "#201a1a",
+      //     fg: "#ede0de",
+      //   },
+      //   surface: {
+      //     "default": "#201a1a",
+      //     "fg": "#ede0de",
+      //     "variant": "#534342",
+      //     "variant-fg": "#d8c2c0",
+      //   },
+      //   outline: "#a08c8b",
+      // },
     },
   },
 };