feat: update UI

dulapahv · Jun 21, 2024 · 993979f · 993979f
1 parent 8595a52
commit 993979f
Show file tree

Hide file tree

Showing 11 changed files with 250 additions and 65 deletions.
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -31,7 +31,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: 🏗️ Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
 
       - name: 🏗️ Setup node
         uses: actions/setup-node@v4

diff --git a/src/app/(unauth)/stack/[id]/page.tsx b/src/app/(unauth)/stack/[id]/page.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+interface Props {
+  params: {
+    id: string;
+  };
+}
+
+export default async function Page({ params }: Props) {
+  const id = params.id.split("-")[0];
+
+  return (
+    <div>
+      <div>{id}</div>
+    </div>
+  );
+}
diff --git a/src/app/(unauth)/stack/page.tsx b/src/app/(unauth)/stack/page.tsx
@@ -1,5 +1,10 @@
 import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { twMerge } from "tailwind-merge";
 
+import type { TagWithStacks } from "@/types/prisma";
+import { getManyTag } from "@/data/get-tag";
 import { SITE_NAME } from "@/lib/constants";
 import { Breadcrumb } from "@/ui/breadcrumb";
 
@@ -8,7 +13,25 @@ export const metadata: Metadata = {
   description: "Tools and technologies I use.",
 };
 
-const Page = () => {
+export default async function Page() {
+  const tags = (
+    await getManyTag({
+      select: {
+        id: true,
+        name: true,
+        stacks: {
+          select: {
+            id: true,
+            name: true,
+          },
+          orderBy: {
+            name: "asc",
+          },
+        },
+      },
+    })
+  ).item as TagWithStacks[];
+
   return (
     <div className="space-y-6">
       <Breadcrumb />
@@ -18,8 +41,44 @@ const Page = () => {
           Tools and technologies I use.
         </p>
       </header>
+      <main className="space-y-4 divide-y-1 divide-default-100">
+        {tags.map((tag, index) => (
+          <div key={tag.id} id={tag.name} className="space-y-4">
+            <h2
+              className={twMerge(
+                "text-2xl font-semibold",
+                index !== 0 && "pt-8",
+              )}
+            >
+              {tag.name}
+            </h2>
+            <ul className="grid grid-cols-1 sm:grid-cols-2">
+              {tag.stacks.map((stack) => (
+                <Link
+                  href={`/stack/${stack.id}-${stack.name.replace(/ /g, "-")}`}
+                  key={stack.id}
+                  id={stack.name}
+                  className="flex space-x-2 rounded-md px-4 py-2 duration-100 hover:bg-default-100"
+                >
+                  <Image
+                    src={`https://assets.dulapahv.dev/images%2Fweb_front%2Freactjs.svg`}
+                    alt={stack.name}
+                    width={32}
+                    height={32}
+                    className="rounded-md"
+                  />
+                  <div className="flex flex-col">
+                    <span>{stack.name}</span>
+                    <span className="text-sm text-default-500">
+                      Build and test APIs.
+                    </span>
+                  </div>
+                </Link>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </main>
     </div>
   );
-};
-
-export default Page;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -157,8 +157,14 @@ export default async function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={`min-h-dvhtext-default-800 ${poppins.className}`}>
+    <html
+      lang="en"
+      className="min-h-dvh text-default-800"
+      suppressHydrationWarning
+    >
+      <body
+        className={`mx-auto my-4 mt-16 max-w-5xl text-pretty px-4 antialiased sm:px-16 lg:mt-32 ${poppins.className}`}
+      >
         <div
           aria-hidden
           role="presentation"
@@ -173,7 +179,7 @@ export default async function RootLayout({
         >
           <Image src="/blue.png" alt="" fill priority />
         </div>
-        <Providers className="mx-auto my-4 mb-32 mt-16 max-w-5xl text-pretty px-4 antialiased sm:px-16 lg:mt-32">
+        <Providers className="mb-32">
           <Toaster richColors className="whitespace-pre-line" />
           {children}
         </Providers>

diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
@@ -1,17 +1,9 @@
 import { MetadataRoute } from "next";
 
-import type { City, Country, Experience, Place } from "@prisma/client";
 import { getManyExperience } from "@/data/get-experience";
 import { getManyProject } from "@/data/get-project";
 import { BASE_URL } from "@/lib/constants";
-
-interface ExperienceWithPlace extends Experience {
-  place: Place & {
-    city: City & {
-      country: Country;
-    };
-  };
-}
+import { ExperienceWithPlace } from "@/types/prisma";
 
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const links = [

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -33,7 +33,4 @@
   .prose-mofu li {
     @apply marker:text-primary;
   }
-  .prose-mofu code {
-    @apply rounded-md border-1 border-default-200 bg-default-100 p-0.5 font-normal;
-  }
 }
diff --git a/src/styles/highlight.css b/src/styles/highlight.css
@@ -1,22 +1,23 @@
 pre code.hljs {
-  display: block;
+  display: flex;
   overflow-x: auto;
-  padding: 1em;
+  padding: 1rem;
 }
 code.hljs {
-  padding: 3px 5px;
   border-width: 1px;
-  border-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
   --tw-border-opacity: 1;
-  border-color: rgb(229 229 229 / var(--tw-border-opacity));
+  border-color: hsl(
+    var(--nextui-default-200) /
+      var(--nextui-default-200-opacity, var(--tw-border-opacity))
+  );
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   font-size: 13px;
   color: #171717;
 }
 .dark code.hljs {
-  --tw-border-opacity: 1;
-  border-color: rgb(38 38 38 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(10 10 10 / var(--tw-bg-opacity));
   color: #ededed;

diff --git a/src/ui/markdown-renderer/code-renderer.tsx b/src/ui/markdown-renderer/code-renderer.tsx
@@ -1,11 +1,47 @@
+import { Poppins } from "next/font/google";
 import { twMerge } from "tailwind-merge";
 
+const poppins = Poppins({
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  subsets: ["latin"],
+});
+
 export function codeRenderer(props: any) {
   if (props.className?.includes("hljs")) {
-    return <code className={props.className}>{props.children}</code>;
+    const fileName = props.children[0].props.children.slice(3, -3) as string;
+    const remainingChildren = props.children.slice(2);
+    const line =
+      props.node.position.end.line - props.node.position.start.line - 1;
+
+    return (
+      <>
+        <div
+          className={`flex h-12 items-center justify-between rounded-t-md border-1 border-b-0 border-default-200 bg-neutral-50 px-4 text-sm text-default-500 dark:bg-black`}
+        >
+          <p>{fileName}</p>
+        </div>
+        <code className={props.className}>
+          <div
+            className={`hidden min-w-8 select-none flex-col pr-4 text-right text-[13px]/[1.75] text-default-400 sm:flex`}
+          >
+            {Array.from({ length: line - 1 }, (_, i) => (
+              <span key={i}>{i + 1}</span>
+            ))}
+          </div>
+          <div>{remainingChildren}</div>
+        </code>
+      </>
+    );
   }
 
   return (
-    <code className={twMerge(props.className)}>{props.children}</code>
+    <code
+      className={twMerge(
+        `rounded-md border-1 border-default-300 bg-default-100 px-1 py-0.5 font-normal before:content-none after:content-none ${poppins.className}`,
+        props.className,
+      )}
+    >
+      {props.children}
+    </code>
   );
 }