[www]: (refactor): Update site header, Remove UI from packages. (#9)

- Updated site header
- Remove UI package and add ui components in www
- refactor code

apps/www/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

apps/www/package.json

@@ -1,53 +1,61 @@
 {
-  "name": "www",
-  "version": "0.1.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "build": "pnpm with-env next build",
-    "dev": "pnpm with-env next dev",
-    "lint": "next lint",
-    "start": "pnpm with-env next start --port=3001",
-    "with-env": "dotenv -e ../../.env --"
-  },
-  "dependencies": {
-    "@hookform/resolvers": "^3.3.4",
-    "@t3-oss/env-nextjs": "^0.9.2",
-    "@tanstack/react-query": "^5.24.1",
-    "@vercel/analytics": "^1.2.2",
-    "geist": "^1.2.2",
-    "lucide-react": "^0.343.0",
-    "next": "^14.1.0",
-    "next-themes": "^0.2.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-hook-form": "^7.50.1",
-    "react-wrap-balancer": "^1.1.0",
-    "zod": "^3.22.4"
-  },
-  "devDependencies": {
-    "@rapidlaunch/db": "workspace:*",
-    "@rapidlaunch/eslint-config": "workspace:*",
-    "@rapidlaunch/tailwind-config": "workspace:*",
-    "@rapidlaunch/typescript-config": "workspace:*",
-    "@rapidlaunch/ui": "workspace:*",
-    "@types/eslint": "^8.56.2",
-    "@types/node": "^20.11.20",
-    "@types/react": "^18.2.57",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
-    "dotenv-cli": "^7.3.0",
-    "eslint": "^8.56.0",
-    "eslint-config-next": "^14.1.0",
-    "postcss": "^8.4.34",
-    "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.11",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3"
-  },
-  "ct3aMetadata": {
-    "initVersion": "7.28.0"
-  },
-  "packageManager": "pnpm@8.15.2"
+    "name": "www",
+    "version": "0.1.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "build": "pnpm with-env next build",
+        "dev": "pnpm with-env next dev",
+        "lint": "next lint",
+        "start": "pnpm with-env next start --port=3001",
+        "with-env": "dotenv -e ../../.env --"
+    },
+    "dependencies": {
+        "@hookform/resolvers": "^3.3.4",
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "^2.0.6",
+        "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-slot": "^1.0.2",
+        "@t3-oss/env-nextjs": "^0.9.2",
+        "@tanstack/react-query": "^5.24.1",
+        "@vercel/analytics": "^1.2.2",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.0",
+        "geist": "^1.2.2",
+        "lucide-react": "^0.343.0",
+        "next": "^14.1.0",
+        "next-themes": "^0.2.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-hook-form": "^7.50.1",
+        "react-wrap-balancer": "^1.1.0",
+        "sonner": "^1.4.2",
+        "tailwind-merge": "^2.2.1",
+        "tailwindcss-animate": "^1.0.7",
+        "zod": "^3.22.4"
+    },
+    "devDependencies": {
+        "@rapidlaunch/db": "workspace:*",
+        "@rapidlaunch/eslint-config": "workspace:*",
+        "@rapidlaunch/tailwind-config": "workspace:*",
+        "@rapidlaunch/typescript-config": "workspace:*",
+        "@types/eslint": "^8.56.2",
+        "@types/node": "^20.11.20",
+        "@types/react": "^18.2.57",
+        "@types/react-dom": "^18.2.19",
+        "@typescript-eslint/eslint-plugin": "^7.0.2",
+        "@typescript-eslint/parser": "^7.0.2",
+        "dotenv-cli": "^7.3.0",
+        "eslint": "^8.56.0",
+        "eslint-config-next": "^14.1.0",
+        "postcss": "^8.4.34",
+        "prettier": "^3.2.5",
+        "prettier-plugin-tailwindcss": "^0.5.11",
+        "tailwindcss": "^3.4.1",
+        "typescript": "^5.3.3"
+    },
+    "ct3aMetadata": {
+        "initVersion": "7.28.0"
+    },
+    "packageManager": "pnpm@8.15.2"
 }

apps/www/src/app/(app)/_components/main-nav.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { navConfig } from "@/config/nav";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+
+export function MainNav() {
+    const pathname = usePathname();
+
+    return (
+        <section className="hidden gap-6 sm:flex sm:items-center">
+            <nav className="flex items-center gap-2">
+                <ul className="flex items-center gap-5">
+                    {navConfig.items.map((item) => (
+                        <li key={item.label}>
+                            <Link
+                                href={item.href}
+                                className={cn(
+                                    " text-sm text-muted-foreground hover:text-foreground/80",
+                                    {
+                                        "text-foreground":
+                                            pathname === item.href,
+                                    },
+                                )}
+                            >
+                                {item.label}
+                            </Link>
+                        </li>
+                    ))}
+                </ul>
+            </nav>
+        </section>
+    );
+}

apps/www/src/app/(app)/_components/mobile-nav.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { Icons } from "@/components/icons";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { navConfig } from "@/config/nav";
+import { siteUrls } from "@/config/urls";
+import { cn } from "@/lib/utils";
+import type { LinkProps } from "next/link";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+export function MobileNav() {
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+    return (
+        <Sheet open={isOpen} onOpenChange={(o: boolean) => setIsOpen(o)}>
+            <SheetTrigger asChild>
+                <Button
+                    variant="outline"
+                    size="iconSm"
+                    className="flex sm:hidden"
+                >
+                    <Icons.hamburger className="h-4 w-4" />
+                </Button>
+            </SheetTrigger>
+            <SheetContent side="left" className="pr-0">
+                <div className="mb-8">
+                    <Link href={siteUrls.home} className="left-4 z-10">
+                        <Icons.logo
+                            iconProps={{
+                                className:
+                                    "w-6 h-6 sm:w-5 sm:h-5 fill-foreground",
+                            }}
+                        />
+                    </Link>
+                </div>
+
+                <div className="flex flex-col space-y-2">
+                    {navConfig.items.map((item) => (
+                        <MobileLink
+                            key={item.label}
+                            href={item.href}
+                            onOpenChange={setIsOpen}
+                            disabled={item.disabled}
+                            className={cn(
+                                "text-base text-muted-foreground hover:text-foreground/80",
+                                {
+                                    "text-foreground": false,
+                                },
+                            )}
+                        >
+                            {item.label}
+                        </MobileLink>
+                    ))}
+                </div>
+            </SheetContent>
+        </Sheet>
+    );
+}
+
+interface MobileLinkProps extends LinkProps {
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+
+function MobileLink({
+    href,
+    onOpenChange,
+    className,
+    children,
+    disabled,
+    ...props
+}: MobileLinkProps) {
+    const router = useRouter();
+    return (
+        <Link
+            href={href}
+            onClick={() => {
+                void router.push(String(href));
+                onOpenChange?.(false);
+            }}
+            className={cn(
+                disabled && "pointer-events-none opacity-60",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </Link>
+    );
+}

apps/www/src/app/(app)/_components/side-header.tsx

@@ -0,0 +1,64 @@
+import { MainNav } from "@/app/(app)/_components/main-nav";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { MoonIcon, SunIcon } from "lucide-react";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { siteUrls } from "@/config/urls";
+import Link from "next/link";
+import { Icons } from "@/components/icons";
+import { MobileNav } from "@/app/(app)/_components/mobile-nav";
+
+export function SiteHeader() {
+    return (
+        <header className="sticky top-0 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+            <div className="container flex h-14 max-w-screen-2xl items-center justify-between">
+                <div className="flex items-center gap-5">
+                    <MobileNav />
+
+                    <Link href={siteUrls.home} className="left-4 z-10">
+                        <Icons.logo
+                            classNameText="hidden sm:block"
+                            iconProps={{
+                                className:
+                                    "w-6 h-6 sm:w-5 sm:h-5 fill-foreground",
+                            }}
+                        />
+                    </Link>
+
+                    <MainNav />
+                </div>
+
+                <nav className="flex items-center gap-2">
+                    <Link
+                        href={siteUrls.twitter}
+                        target="_blank"
+                        className={buttonVariants({
+                            variant: "outline",
+                            size: "iconSm",
+                        })}
+                    >
+                        <Icons.twitter className="h-4 w-4 fill-foreground" />
+                    </Link>
+                    <Link
+                        href={siteUrls.github}
+                        target="_blank"
+                        className={buttonVariants({
+                            variant: "outline",
+                            size: "iconSm",
+                        })}
+                    >
+                        <Icons.gitHub className="h-4 w-4 fill-foreground" />
+                    </Link>
+                    <ThemeToggle
+                        button={
+                            <Button variant="outline" size="iconSm">
+                                <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                                <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                                <span className="sr-only">Toggle theme</span>
+                            </Button>
+                        }
+                    />
+                </nav>
+            </div>
+        </header>
+    );
+}

apps/www/src/app/(app)/layout.tsx

@@ -0,0 +1,14 @@
+import { SiteHeader } from "@/app/(app)/_components/side-header";
+
+interface AppLayoutProps {
+    children: React.ReactNode;
+}
+
+export default function AppLayout({ children }: AppLayoutProps) {
+    return (
+        <>
+            <SiteHeader />
+            <main className="flex-1">{children}</main>
+        </>
+    );
+}

apps/www/src/app/page.tsx → apps/www/src/app/(app)/page.tsx

@@ -1,11 +1,11 @@
-import { Badge } from "@rapidlaunch/ui/badge";
+import { Badge } from "@/components/ui/badge";
 import Balance from "react-wrap-balancer";
 import { EarlyAccessForm } from "@/components/early-access-form";
 
 export default function HomePage() {
     return (
         <main className="container flex flex-col items-center justify-center gap-4 py-20">
-            <Badge size="md" variant="secondary" className="gap-2">
+            <Badge variant="secondary" className="gap-2">
                 <span>🎉</span>{" "}
                 <p>Open Source SaaS Starterkits and components</p>
             </Badge>

apps/www/src/app/layout.tsx

@@ -1,20 +1,19 @@
-import Background from "@/components/background";
-import { Header } from "@/components/header";
 import Providers from "@/components/providers";
-import { Toaster } from "@rapidlaunch/ui/sonner";
+import { Toaster } from "@/components/ui/sonner";
 import "@/styles/globals.css";
 
-import { GeistSans } from "geist/font/sans";
 import type { Metadata } from "next";
 import { siteConfig } from "@/config/site";
 import { Analytics } from "@vercel/analytics/react";
+import { fontSans } from "@/lib/fonts";
 
 const TITLE =
     "Rapidlaunch | Open Source Nextjs SaaS Starterkits and Components";
 const DESCRIPTION =
     "Launch your apps faster with our SaaS starterkits, components, building blocks. Customizable. Open Source";
 
 export const metadata: Metadata = {
+    metadataBase: new URL("https://www.rapidlaunch.xyz"),
     title: TITLE,
     description: DESCRIPTION,
     icons: [{ rel: "icon", url: "/favicon.ico" }],
@@ -50,13 +49,10 @@ export default function RootLayout({
 }) {
     return (
         <html lang="en">
-            <body className={`${GeistSans.className}`}>
+            <body className={`${fontSans.className}`}>
                 <Providers>
-                    <Background>
-                        <Header />
-                        {children}
-                        <Toaster position="top-center" />
-                    </Background>
+                    {children}
+                    <Toaster position="top-center" />
                 </Providers>
                 <Analytics />
             </body>