wip design page

Riley1101 · Oct 2, 2024 · 3b80e1a · 3b80e1a
1 parent 8e90e64
commit 3b80e1a
Show file tree

Hide file tree

Showing 11 changed files with 169 additions and 111 deletions.
diff --git a/app/(design)/design/page.tsx b/app/(design)/design/page.tsx
@@ -1,9 +1,20 @@
-import { TypographyDemo } from "@/components/design/Typography";
+import { H2, Paragraph } from "@design/Typography";
+import { Header } from "@design/Header";
 
 export default function Page() {
   return (
-    <div className="container mx-auto">
-      <TypographyDemo/>
+    <div className="min-h-screen lg:border-x container lg:mx-auto text-foreground lg:grid lg:grid-cols-[240px_1fr]">
+      <div className="border-r"></div>
+      <div>
+        <Header />
+        <div className="box">
+          <H2>Design System</H2>
+          <Paragraph className="text-muted-foreground">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum atque
+            aliquid omnis odit voluptate a repellendus possimus.
+          </Paragraph>
+        </div>
+      </div>
     </div>
-  )
+  );
 }
diff --git a/app/(design)/globals.css b/app/(design)/globals.css
diff --git a/app/(design)/layout.tsx b/app/(design)/layout.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import './globals.css';
+import "@styles/globals.css";
 
 export default function RootLayout({
   children,
@@ -9,7 +9,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head />
-      <body className="font-design">{children}</body>
+      <body className="dark font-design bg-background">{children}</body>
     </html>
   );
 }
diff --git a/app/(studio)/global.css b/app/(studio)/global.css
diff --git a/app/(studio)/layout.tsx b/app/(studio)/layout.tsx
@@ -1,5 +1,5 @@
-import "./global.css";
 import React from "react";
+
 export default function RootLayout({
   children,
 }: {

diff --git a/app/(web)/layout.tsx b/app/(web)/layout.tsx
@@ -1,4 +1,4 @@
-import "./globals.css";
+import "@styles/globals.css";
 import "dracula-prism/dist/css/dracula-prism.min.css";
 import "katex/dist/katex.min.css";
 import GradientMesh from "@/components/common/gradient-mesh";
@@ -7,7 +7,7 @@ import NavAside from "@/components/common/nav-aside";
 import React from "react";
 import type { Metadata } from "next";
 import { AnalyticsWrapper } from "@/components/common/analytics";
-import { Inter, Ubuntu } from "next/font/google";
+import { Ubuntu } from "next/font/google";
 import { getOpenGraph, getTwitterCard, metaData } from "@/utils/metadata";
 import { CSPostHogProvider } from "@/components/providers/PostHogProvider";
 

diff --git a/components/design/Header.tsx b/components/design/Header.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { Link } from "./Typography";
+
+type Props = {};
+
+export function Header({}: Props) {
+  return (
+    <header className="bg-background w-full h-[3.5em] px-4 md:px-12 flex items-center border-b">
+      <Link className="no-underline">Arkar Myat</Link>
+    </header>
+  );
+}
diff --git a/components/design/Typography.tsx b/components/design/Typography.tsx
@@ -1,64 +1,99 @@
 import NextLink from "next/link";
+import { cn } from "@/lib/utils";
 
-export function H1() {
+interface TypographyProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function H1(props: TypographyProps) {
+  let { children, className } = props;
   return (
-    <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-      The Joke Tax Chronicles
+    <h1
+      className={cn(
+        "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+        className,
+      )}
+    >
+      {children}
     </h1>
   );
 }
 
-export function H2() {
+export function H2(props: TypographyProps) {
+  let { children, className } = props;
   return (
-    <h2 className="mt-10 scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
-      The King's Plan
+    <h2
+      className={cn(
+        "mt-10 scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0",
+        className,
+      )}
+    >
+      {children}
     </h2>
   );
 }
 
-export function H3() {
+export function H3(props: TypographyProps) {
+  let { children, className } = props;
   return (
-    <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
-      The Joke Tax
+    <h3
+      className={cn(
+        "mt-8 scroll-m-20 text-2xl font-semibold tracking-tight",
+        className,
+      )}
+    >
+      {children}
     </h3>
   );
 }
 
-export function H4() {
+export function H4(props: TypographyProps) {
+  let { children, className } = props;
   return (
-    <h3 className="mt-8 scroll-m-20 text-xl font-semibold tracking-tight">
-      The Joke Tax
-    </h3>
+    <h4
+      className={cn(
+        "mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
+        className,
+      )}
+    >
+      {children}
+    </h4>
   );
 }
 
-export function Paragraph() {
+export function Paragraph(props: TypographyProps) {
+  let { children, className } = props;
   return (
-    <p className="leading-7 [&:not(:first-child)]:mt-6">
-      As a result, people stopped telling jokes, and the kingdom fell into a
-      gloom. But there was one person who refused to let the king's foolishness
-      get him down: a court jester named Jokester.
+    <p
+      className={cn("leading-7 [&:not(:first-child)]:mt-4 text-lg", className)}
+    >
+      {children}
     </p>
   );
 }
 
-export function Link() {
+export function Blockqoute({ children }: TypographyProps) {
   return (
-    <NextLink
-      href="#"
-      className="font-medium text-primary underline underline-offset-4"
-    >
-      a brilliant plan
-    </NextLink>
+    <blockquote className="mt-6 border-l-2 pl-6 italic">{children}</blockquote>
   );
 }
 
-export function Blockqoute() {
+interface LinkProps { }
+
+export function Link(props: React.AnchorHTMLAttributes<LinkProps>) {
+  const { children, className, ...rest } = props;
   return (
-    <blockquote className="mt-6 border-l-2 pl-6 italic">
-      "After all," he said, "everyone enjoys a good joke, so it's only fair that
-      they should pay for the privilege."
-    </blockquote>
+    <NextLink
+      href="#"
+      className={cn(
+        "font-medium text-primary underline underline-offset-4",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </NextLink>
   );
 }
 
@@ -114,4 +149,3 @@ export function Table() {
     </table>
   );
 }
-
diff --git a/app/(web)/globals.css → styles/globals.css b/app/(web)/globals.css → styles/globals.css
@@ -2,6 +2,70 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
 @layer utilities {
   .page-container {
     @apply w-full grid  grid-cols-1 lg:grid-cols-[2.5fr_1fr] md:max-w-[800px] lg:max-w-[1140px];
@@ -15,6 +79,10 @@
   .title {
     font-size: clamp(2.5rem, 5vw, 3rem);
   }
+
+  .box {
+    @apply p-4 md:p-8 lg:p-12;
+  }
 }
 ::-moz-selection {
   @apply bg-gray-700;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -22,8 +22,10 @@ module.exports = {
         "theme-accent": "#88ced3",
         "theme-accent-opaque": "#88ced309",
         "theme-body": "#cbd5e1",
+
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
+
         card: {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",

diff --git a/tsconfig.json b/tsconfig.json
@@ -25,7 +25,8 @@
     "experimentalDecorators": true,
     "paths": {
       "@/*": ["./*"],
-      "@design": ["./components/design/*"]
+      "@design/*": ["./components/design/*"],
+      "@styles/*": ["./styles/*"]
     },
     "plugins": [
       {