first commit

2026-02-21 17:34:29 +07:00
commit fc7b96daf6
29 changed files with 7364 additions and 0 deletions
@@ -0,0 +1,17 @@
+export function Footer() {
+  return (
+    <footer className="border-t border-border bg-card">
+      <div className="mx-auto flex max-w-6xl flex-col items-center gap-4 px-4 py-8 sm:flex-row sm:justify-between lg:px-8">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-foreground">
+            FormCraft
+          </span>
+        </div>
+
+        <p className="text-sm text-muted-foreground">
+          {"Ristek Task - Bagas"}
+        </p>
+      </div>
+    </footer>
+  )
+}
@@ -0,0 +1,48 @@
+import { type ButtonHTMLAttributes, forwardRef } from "react"
+import { cn } from "@/lib/utils"
+
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost"
+type ButtonSize = "sm" | "md" | "lg"
+
+interface FormButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant
+  size?: ButtonSize
+}
+
+const variantStyles: Record<ButtonVariant, string> = {
+  primary:
+    "bg-primary text-primary-foreground hover:opacity-90 shadow-sm",
+  secondary:
+    "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  outline:
+    "border border-border bg-card text-foreground hover:bg-secondary",
+  ghost:
+    "text-foreground hover:bg-secondary",
+}
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: "px-3 py-1.5 text-sm rounded-md",
+  md: "px-4 py-2.5 text-sm rounded-lg",
+  lg: "px-6 py-3 text-base rounded-lg",
+}
+
+export const FormButton = forwardRef<HTMLButtonElement, FormButtonProps>(
+  ({ variant = "primary", size = "md", className, children, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          "inline-flex items-center justify-center gap-2 font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:pointer-events-none disabled:opacity-50",
+          variantStyles[variant],
+          sizeStyles[size],
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    )
+  }
+)
+FormButton.displayName = "FormButton"
@@ -0,0 +1,44 @@
+import { type InputHTMLAttributes, forwardRef } from "react"
+import { cn } from "@/lib/utils"
+
+interface FormInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string
+  error?: string
+  hint?: string
+}
+
+export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
+  ({ label, error, hint, className, id, ...props }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, "-")
+
+    return (
+      <div className="flex flex-col gap-1.5">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="text-sm font-medium text-foreground"
+          >
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          id={inputId}
+          className={cn(
+            "rounded-lg border border-input bg-card px-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground",
+            "outline-none transition-colors focus:border-primary focus:ring-2 focus:ring-primary/20",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            error && "border-destructive focus:border-destructive focus:ring-destructive/20",
+            className
+          )}
+          {...props}
+        />
+        {hint && !error && (
+          <p className="text-xs text-muted-foreground">{hint}</p>
+        )}
+        {error && <p className="text-xs text-destructive">{error}</p>}
+      </div>
+    )
+  }
+)
+FormInput.displayName = "FormInput"
@@ -0,0 +1,127 @@
+"use client"
+
+import { Link } from "react-router";
+import { useLocation } from "react-router";
+import {  LogOut, Menu, X } from "lucide-react"
+import { useState } from "react"
+
+const navLinks = [
+  { href: "/forms", label: "My Forms" },
+]
+
+export function Navbar() {
+const { pathname } = useLocation();
+const [mobileOpen, setMobileOpen] = useState(false);
+
+const isAuthPage = pathname === "/login" || pathname === "/register";
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-border bg-card/80 backdrop-blur-md">
+      <nav className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3 lg:px-8">
+        <Link to="/" className="flex items-center gap-2">
+          <span className="text-lg font-semibold text-foreground">
+            FormCraft
+          </span>
+        </Link>
+
+        {!isAuthPage && (
+          <>
+            <div className="hidden items-center gap-6 md:flex">
+              {navLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  to={link.href}
+                  className={`text-sm font-medium transition-colors hover:text-primary ${
+                    pathname === link.href
+                      ? "text-primary"
+                      : "text-muted-foreground"
+                  }`}
+                >
+                  {link.label}
+                </Link>
+              ))}
+            </div>
+
+            <div className="hidden items-center gap-4 md:flex">
+              <span className="text-sm text-muted-foreground">
+                bagas@example.com
+              </span>
+              <Link
+                to="/login"
+                className="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+              >
+                <LogOut className="h-4 w-4" />
+                Logout
+              </Link>
+            </div>
+
+            <button
+              onClick={() => setMobileOpen(!mobileOpen)}
+              className="flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-secondary md:hidden"
+              aria-label="Toggle mobile menu"
+            >
+              {mobileOpen ? (
+                <X className="h-5 w-5" />
+              ) : (
+                <Menu className="h-5 w-5" />
+              )}
+            </button>
+          </>
+        )}
+
+        {isAuthPage && (
+          <div className="flex items-center gap-3">
+            <Link
+              to="/login"
+              className={`text-sm font-medium transition-colors hover:text-primary ${
+                pathname === "/login"
+                  ? "text-primary"
+                  : "text-muted-foreground"
+              }`}
+            >
+              Log in
+            </Link>
+            <Link
+              to="/register"
+              className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90"
+            >
+              Sign up
+            </Link>
+          </div>
+        )}
+      </nav>
+
+      {!isAuthPage && mobileOpen && (
+        <div className="border-t border-border bg-card px-4 pb-4 pt-2 md:hidden">
+          {navLinks.map((link) => (
+            <Link
+              key={link.href}
+              to={link.href}
+              onClick={() => setMobileOpen(false)}
+              className={`block rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-secondary ${
+                pathname === link.href
+                  ? "text-primary"
+                  : "text-muted-foreground"
+              }`}
+            >
+              {link.label}
+            </Link>
+          ))}
+          <div className="mt-2 border-t border-border pt-2">
+            <span className="block px-3 py-1 text-sm text-muted-foreground">
+              bagas@example.com
+            </span>
+            <Link
+              to="/login"
+              onClick={() => setMobileOpen(false)}
+              className="flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary"
+            >
+              <LogOut className="h-4 w-4" />
+              Logout
+            </Link>
+          </div>
+        </div>
+      )}
+    </header>
+  )
+}