feat: add homepage & auth

2026-10-24 11:53:58 +07:00 · 2024-02-23 19:36:10 +07:00
parent d579c1b7c5
commit 735fa9354b
42 changed files with 981 additions and 70 deletions
@@ -0,0 +1,35 @@
+import Link from "~/renderer/link";
+import Logo from "./logo";
+
+const Footer = () => {
+  return (
+    <footer className="py-12 md:py-24 border-t border-white/20">
+      <div className="container max-w-5xl grid md:grid-cols-2 gap-x-4 gap-y-6">
+        <div>
+          <Logo size="lg" />
+          <p className="text-sm mt-3 text-white/80">
+            Create, Collaborate, and Share your web design or snippets with
+            ease.
+          </p>
+        </div>
+        <div>
+          <p>Links</p>
+          <ul className="mt-4 text-sm space-y-2 text-white/80">
+            <li>
+              <Link href="#" className="hover:text-white">
+                Terms and Condition
+              </Link>
+            </li>
+            <li>
+              <Link href="#" className="hover:text-white">
+                Privacy Policy
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
@@ -0,0 +1,27 @@
+import React from "react";
+import { cn } from "~/lib/utils";
+
+type Props = {
+  size?: "sm" | "md" | "lg";
+};
+
+const Logo = ({ size = "md" }: Props) => {
+  const sizes: Record<typeof size, string> = {
+    sm: "text-lg",
+    md: "text-xl",
+    lg: "text-2xl",
+  };
+
+  return (
+    <p
+      className={cn(
+        "text-xl font-bold text-transparent bg-gradient-to-b from-gray-200 to-gray-100 bg-clip-text",
+        sizes[size]
+      )}
+    >
+      CodeShare
+    </p>
+  );
+};
+
+export default Logo;
@@ -0,0 +1,85 @@
+import React, { ComponentProps } from "react";
+import { cn } from "~/lib/utils";
+import Link from "~/renderer/link";
+import { Button } from "../ui/button";
+import Logo from "./logo";
+import { useAuth } from "~/hooks/useAuth";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { FaChevronDown } from "react-icons/fa";
+import trpc from "~/lib/trpc";
+
+const Navbar = () => {
+  const { user } = useAuth();
+  const logout = trpc.auth.logout.useMutation({
+    onSuccess() {
+      window.location.reload();
+    },
+  });
+
+  return (
+    <>
+      <div className="h-16" />
+
+      <header className="h-16 bg-background fixed z-20 top-0 left-0 w-full border-b border-white/20">
+        <div className="h-full container max-w-5xl flex items-center gap-3">
+          <Logo />
+
+          <NavMenu className="md:ml-8 flex-1">
+            <NavItem href="/">Home</NavItem>
+            {/* <NavItem href="/browse">Browse</NavItem> */}
+          </NavMenu>
+
+          <div className="flex items-center gap-3">
+            {user ? (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" className="gap-3 px-0">
+                    <div className="size-8 rounded-full bg-white/40" />
+                    <p>{user.name}</p>
+                    <FaChevronDown />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={() => logout.mutate()}>
+                    Logout
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            ) : (
+              <Button>Log in</Button>
+            )}
+          </div>
+        </div>
+      </header>
+    </>
+  );
+};
+
+const NavMenu = ({ children, className }: ComponentProps<"nav">) => (
+  <nav className={cn("flex items-stretch h-full gap-6", className)}>
+    {children}
+  </nav>
+);
+
+type NavItemProps = {
+  href?: string;
+  children?: React.ReactNode;
+};
+
+const NavItem = ({ href, children }: NavItemProps) => {
+  return (
+    <Link
+      href={href}
+      className="flex items-center text-white/70 data-[active]:text-white hover:text-white transition-colors"
+    >
+      {children}
+    </Link>
+  );
+};
+
+export default Navbar;