feat(home heading)

Author: Jee-vim

app/globals.css

@@ -45,6 +45,18 @@
 }
 
 @layer utilities {
+  .text-40 {
+    @apply text-2xl md:text-3xl xl:text-4xl font-bold;
+  }
+
+  .text-28 {
+    @apply text-[20px] md:text-[28px];
+  }
+
+  .text-20 {
+    @apply text-sm md:text-[20px];
+  }
+
   .btn-global {
     @apply transition-colors flex items-center justify-center gap-2 font-medium duration-200 min-h-[38px] sm:h-9 rounded-lg py-1 px-4 md:px-5 text-sm;
   }

app/page.tsx

@@ -1,7 +1,18 @@
+import CButton from "@/components/shared/CButton";
+
 export default function Page() {
   return (
-    <div className="max-w-[1400px] mx-auto px-5 flex flex-col justify-center gap-4 h-dvh">
-      hello
+    <div className="max-w-[1000px] mx-auto px-5 flex flex-col justify-center gap-4 h-dvh">
+      <h1 className="text-40">UI Dash</h1>
+      <p className="text-20">Just a simple dashboard ui for your starter:)</p>
+      <div className="flex gap-4 items-center pt-5">
+        <CButton title="See Example" href="/v1" />
+        <CButton
+          title="View Github"
+          href="https://github.com/zedd-dev/ui-dash"
+          newWindow
+        />
+      </div>
     </div>
   );
 }

components/shared/CButton.tsx

@@ -0,0 +1,13 @@
+import Link from "next/link";
+import styles from "@/styles/component/button.module.css";
+import { cn } from "@/lib/utils";
+
+export default function CButton({ title, href,newWindow }: any) {
+  return href ? (
+    <Link href={href} target={newWindow ? "_blank" : "_self"} className={cn(styles.container, styles.default)}>
+      {title}
+    </Link>
+  ) : (
+    <button className={cn(styles.container, styles.default)}>{title}</button>
+  );
+}

hooks/index.ts

@@ -66,33 +66,6 @@ export function useScrollX() {
   }, []);
 }
 
-export const useCheckPosition = (
-  setPosition: (position: "top" | "bottom") => void,
-  REF: React.RefObject<HTMLDivElement>,
-  isActive: boolean,
-) => {
-  const check = () => {
-    const RECT = REF.current?.getBoundingClientRect();
-    if (!RECT) return;
-
-    const SPACE_ABOVE = RECT.top;
-    const SPACE_BELOW = window.innerHeight - RECT.bottom;
-    const HEIGHT = 200;
-
-    if (SPACE_BELOW >= HEIGHT || SPACE_BELOW >= SPACE_ABOVE) {
-      setPosition("bottom");
-    } else {
-      setPosition("top");
-    }
-  };
-
-  useEffect(() => {
-    check();
-    window.addEventListener("resize", check);
-    return () => window.removeEventListener("resize", check);
-  }, [isActive]);
-};
-
 export const useDisableScroll = (isOpen: boolean) => {
   useEffect(() => {
     if (isOpen) {

next.config.mjs

@@ -1,8 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  images: {
-    domains: ["source.unsplash.com","picsum.photos","via.placeholder.com"],
-  }
-};
+const nextConfig = {};
 
 export default nextConfig;

styles/component/button.module.css

@@ -0,0 +1,7 @@
+.container {
+  @apply text-base font-semibold rounded-lg px-4 py-2;
+}
+
+.default {
+  @apply border border-l-4 border-b-4 border-light-300 text-light-300 hover:scale-105 transition-all duration-300;
+}