first commit

components/forms/form-card.tsx

@@ -0,0 +1,57 @@
+import {
+  Calendar,
+  Eye,
+  FileText,
+  MessageSquare,
+} from "lucide-react"
+import type { Form } from "@/lib/dummy-data"
+import { FormButton } from "@/components/shared/form-button"
+import { Link } from "react-router";
+
+interface FormCardProps {
+  form: Form
+}
+
+export function FormCard({ form }: FormCardProps) {
+  return (
+    <div className="group flex flex-col rounded-xl border border-border bg-card shadow-sm transition-shadow hover:shadow-md">
+      <div className="h-1.5 rounded-t-xl bg-primary" />
+
+      <div className="flex flex-1 flex-col p-5">
+        <div className="mb-3">
+          <h3 className="text-base font-semibold leading-snug text-foreground text-pretty">
+            {form.title}
+          </h3>
+        </div>
+
+        <p className="mb-4 line-clamp-2 text-sm leading-relaxed text-muted-foreground">
+          {form.description}
+        </p>
+
+        <div className="mt-auto flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-muted-foreground">
+          <span className="flex items-center gap-1">
+            <FileText className="h-3.5 w-3.5" />
+            {form.questions.length} questions
+          </span>
+          <span className="flex items-center gap-1">
+            <MessageSquare className="h-3.5 w-3.5" />
+            {form.responseCount} responses
+          </span>
+          <span className="flex items-center gap-1">
+            <Calendar className="h-3.5 w-3.5" />
+            {form.updatedAt}
+          </span>
+        </div>
+
+        <div className="mt-4 border-t border-border pt-4">
+          <Link to={`/forms/${form.id}`}>
+            <FormButton variant="outline" size="sm" className="w-full">
+              <Eye className="h-3.5 w-3.5" />
+              Preview Form
+            </FormButton>
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

components/forms/question-preview.tsx

@@ -0,0 +1,104 @@
+import {
+  Calendar,
+  ChevronDown,
+  Star,
+} from "lucide-react"
+import type { Question } from "@/lib/dummy-data"
+
+interface QuestionPreviewProps {
+  question: Question
+  index: number
+}
+
+export function QuestionPreview({ question, index }: QuestionPreviewProps) {
+  return (
+    <div className="rounded-xl border border-border bg-card p-5 shadow-sm">
+      {/* Question header */}
+      <div className="mb-4 flex items-start gap-3">
+        <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-xs font-semibold text-primary">
+          {index + 1}
+        </span>
+        <div className="flex-1">
+          <h3 className="text-sm font-semibold leading-snug text-foreground">
+            {question.title}
+            {question.required && (
+              <span className="ml-1 text-destructive">*</span>
+            )}
+          </h3>
+          <p className="mt-1 text-xs capitalize text-muted-foreground">
+            {question.type.replace("_", " ")}
+          </p>
+        </div>
+      </div>
+
+      {/* Read-only field preview */}
+      <div className="pl-10">
+        {question.type === "short_text" && (
+          <div className="rounded-lg border border-input bg-muted/50 px-3.5 py-2.5 text-sm text-muted-foreground">
+            Short answer text
+          </div>
+        )}
+
+        {question.type === "long_text" && (
+          <div className="min-h-[80px] rounded-lg border border-input bg-muted/50 px-3.5 py-2.5 text-sm text-muted-foreground">
+            Long answer text
+          </div>
+        )}
+
+        {question.type === "multiple_choice" && question.options && (
+          <div className="flex flex-col gap-2.5">
+            {question.options.map((option) => (
+              <label
+                key={option}
+                className="flex items-center gap-2.5 text-sm text-foreground"
+              >
+                <span className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-input" />
+                {option}
+              </label>
+            ))}
+          </div>
+        )}
+
+        {question.type === "checkbox" && question.options && (
+          <div className="flex flex-col gap-2.5">
+            {question.options.map((option) => (
+              <label
+                key={option}
+                className="flex items-center gap-2.5 text-sm text-foreground"
+              >
+                <span className="flex h-4 w-4 shrink-0 items-center justify-center rounded border-2 border-input" />
+                {option}
+              </label>
+            ))}
+          </div>
+        )}
+
+        {question.type === "dropdown" && (
+          <div className="flex items-center justify-between rounded-lg border border-input bg-muted/50 px-3.5 py-2.5 text-sm text-muted-foreground">
+            <span>Select an option</span>
+            <ChevronDown className="h-4 w-4" />
+          </div>
+        )}
+
+        {question.type === "date" && (
+          <div className="flex items-center gap-2 rounded-lg border border-input bg-muted/50 px-3.5 py-2.5 text-sm text-muted-foreground">
+            <Calendar className="h-4 w-4" />
+            <span>mm / dd / yyyy</span>
+          </div>
+        )}
+
+        {question.type === "rating" && (
+          <div className="flex gap-1.5">
+            {[1, 2, 3, 4, 5].map((star) => (
+              <Star
+                key={star}
+                className="h-6 w-6 text-input"
+                strokeWidth={1.5}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

components/shared/footer.tsx

@@ -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>
+  )
+}

components/shared/form-button.tsx

@@ -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"

components/shared/form-input.tsx

@@ -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"

components/shared/navbar.tsx

@@ -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>
+  )
+}