create-blitzpack 0.1.0

package/template/apps/web/src/components/auth/google-button.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Button } from '@repo/packages-ui/button';
+import { useState } from 'react';
+
+import { authClient } from '@/lib/auth';
+
+export function GoogleButton() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleGoogleSignIn = async () => {
+    setIsLoading(true);
+    await authClient.signIn.social({
+      provider: 'google',
+      callbackURL: `${window.location.origin}/dashboard`,
+    });
+  };
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      className="w-full"
+      onClick={handleGoogleSignIn}
+      isLoading={isLoading}
+    >
+      {!isLoading && (
+        <svg
+          className="mr-2 h-5 w-5"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+            fill="#4285F4"
+          />
+          <path
+            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+            fill="#34A853"
+          />
+          <path
+            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+            fill="#FBBC05"
+          />
+          <path
+            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+            fill="#EA4335"
+          />
+        </svg>
+      )}
+      Continue with Google
+    </Button>
+  );
+}

package/template/apps/web/src/components/auth/protected-route.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { Skeleton } from '@repo/packages-ui/skeleton';
+import { useRouter } from 'next/navigation';
+import { type ReactNode, useEffect } from 'react';
+
+import { Forbidden } from '@/components/error/forbidden';
+import { authClient } from '@/lib/auth';
+
+interface ProtectedRouteProps {
+  children: ReactNode;
+  redirectTo?: string;
+  fallback?: ReactNode;
+  requiredRole?: 'admin' | 'super_admin';
+  loadingMessage?: string;
+}
+
+export function ProtectedRoute({
+  children,
+  redirectTo = '/login',
+  fallback,
+  requiredRole,
+  loadingMessage,
+}: ProtectedRouteProps) {
+  const router = useRouter();
+  const { data: session, isPending } = authClient.useSession();
+
+  useEffect(() => {
+    if (!isPending && !session) {
+      router.push(redirectTo);
+    }
+  }, [session, isPending, router, redirectTo]);
+
+  if (isPending) {
+    return (
+      fallback || (
+        <div className="container mx-auto max-w-4xl p-8">
+          <div className="bg-card rounded-lg border p-6 shadow-sm">
+            <div className="mb-4 space-y-2">
+              <Skeleton className="h-8 w-48" />
+              <Skeleton className="h-4 w-64" />
+            </div>
+            <div className="space-y-4">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-10 w-24" />
+            </div>
+          </div>
+        </div>
+      )
+    );
+  }
+
+  if (!session) {
+    return null;
+  }
+
+  if (requiredRole) {
+    const userRole = (session.user as { role?: string }).role;
+    if (userRole !== requiredRole && userRole !== 'super_admin') {
+      return <Forbidden />;
+    }
+  }
+
+  return <>{children}</>;
+}

package/template/apps/web/src/components/auth/redirect-if-authenticated.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { type ReactNode, useEffect } from 'react';
+
+import { authClient } from '@/lib/auth';
+
+interface RedirectIfAuthenticatedProps {
+  children: ReactNode;
+  redirectTo?: string;
+}
+
+export function RedirectIfAuthenticated({
+  children,
+  redirectTo = '/dashboard',
+}: RedirectIfAuthenticatedProps) {
+  const router = useRouter();
+  const { data: session, isPending } = authClient.useSession();
+
+  useEffect(() => {
+    if (!isPending && session) {
+      router.replace(redirectTo);
+    }
+  }, [session, isPending, router, redirectTo]);
+
+  if (isPending || session) {
+    return null;
+  }
+
+  return <>{children}</>;
+}

package/template/apps/web/src/components/auth/with-auth.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { type ComponentType, type ReactNode } from 'react';
+
+import { ProtectedRoute } from '@/components/auth/protected-route';
+
+interface WithAuthOptions {
+  redirectTo?: string;
+  fallback?: ReactNode;
+}
+
+export function withAuth<P extends object>(
+  Component: ComponentType<P>,
+  options: WithAuthOptions = {}
+) {
+  const WrappedComponent = (props: P) => {
+    return (
+      <ProtectedRoute
+        redirectTo={options.redirectTo}
+        fallback={options.fallback}
+      >
+        <Component {...props} />
+      </ProtectedRoute>
+    );
+  };
+
+  WrappedComponent.displayName = `withAuth(${Component.displayName || Component.name || 'Component'})`;
+
+  return WrappedComponent;
+}

package/template/apps/web/src/components/error/error-card.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+interface ErrorCardProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  actions?: ReactNode;
+}
+
+export function ErrorCard({
+  icon: Icon,
+  title,
+  description,
+  actions,
+}: ErrorCardProps) {
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center p-8">
+      <motion.div
+        className="border-border bg-card w-full max-w-md rounded-lg border p-8"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, ease: 'easeOut' }}
+      >
+        <div className="flex flex-col items-center text-center">
+          <motion.div
+            className="bg-muted mb-4 rounded-full p-4"
+            whileHover={{ scale: 1.05 }}
+            transition={{ duration: 0.2 }}
+          >
+            <Icon className="text-muted-foreground h-8 w-8" />
+          </motion.div>
+          <h1 className="text-card-foreground mb-2 text-2xl font-semibold">
+            {title}
+          </h1>
+          <p className="text-muted-foreground mb-6 text-sm leading-relaxed">
+            {description}
+          </p>
+          {actions && <div className="flex flex-wrap gap-3">{actions}</div>}
+        </div>
+      </motion.div>
+    </div>
+  );
+}

package/template/apps/web/src/components/error/forbidden.tsx

@@ -0,0 +1,25 @@
+import { Button } from '@repo/packages-ui/button';
+import { ShieldAlert } from 'lucide-react';
+import Link from 'next/link';
+
+import { ErrorCard } from '@/components/error/error-card';
+
+export function Forbidden() {
+  return (
+    <ErrorCard
+      icon={ShieldAlert}
+      title="Access denied"
+      description="You don't have permission to access this page. Please contact an administrator if you believe this is an error."
+      actions={
+        <>
+          <Button asChild variant="outline">
+            <Link href="/dashboard">Go to dashboard</Link>
+          </Button>
+          <Button asChild>
+            <Link href="/">Go home</Link>
+          </Button>
+        </>
+      }
+    />
+  );
+}

package/template/apps/web/src/components/landing/command-block.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@repo/packages-ui/tooltip';
+import { Check, Copy, Info } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+interface CommandBlockProps {
+  command: string;
+  tooltipContent?: string;
+}
+
+export function CommandBlock({ command, tooltipContent }: CommandBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(command);
+    setCopied(true);
+    toast.success('Copied command to clipboard!');
+    setTimeout(() => setCopied(false), 5000);
+  };
+
+  return (
+    <div className="border-border bg-card text-card-foreground flex items-center justify-between gap-3 rounded-md border px-4 py-3">
+      <span className="font-mono text-sm">
+        <span className="text-muted-foreground">$</span> {command}
+      </span>
+      <div className="flex items-center gap-2">
+        {tooltipContent && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                className="text-muted-foreground hover:text-foreground cursor-pointer transition-colors"
+                aria-label="Command information"
+              >
+                <Info className="h-4 w-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right" className="max-w-xs" sideOffset={8}>
+              {tooltipContent}
+            </TooltipContent>
+          </Tooltip>
+        )}
+        <button
+          type="button"
+          onClick={handleCopy}
+          className="text-muted-foreground hover:text-foreground cursor-pointer transition-colors"
+          aria-label={copied ? 'Copied!' : 'Copy command'}
+        >
+          {copied ? (
+            <Check className="h-4 w-4 text-emerald-500" />
+          ) : (
+            <Copy className="h-4 w-4" />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}

package/template/apps/web/src/components/landing/feature-card.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import {
+  Bot,
+  Code2,
+  GitBranch,
+  Lock,
+  PackageOpen,
+  Rocket,
+  Shield,
+  TestTube,
+  Workflow,
+  Zap,
+} from 'lucide-react';
+
+const iconMap = {
+  Rocket,
+  Lock,
+  Zap,
+  Shield,
+  Workflow,
+  Code2,
+  TestTube,
+  PackageOpen,
+  GitBranch,
+  Bot,
+} as const;
+
+type IconName = keyof typeof iconMap;
+
+interface FeatureCardProps {
+  iconName: IconName;
+  title: string;
+  description: string;
+}
+
+export function FeatureCard({
+  iconName,
+  title,
+  description,
+}: FeatureCardProps) {
+  const Icon = iconMap[iconName];
+
+  return (
+    <motion.div
+      className="border-border bg-card rounded-lg border p-6 transition-colors"
+      whileHover={{ y: -4 }}
+      transition={{ duration: 0.2, ease: 'easeOut' }}
+    >
+      <Icon className="text-foreground mb-3 h-5 w-5" />
+      <h3 className="text-card-foreground mb-2 text-base font-medium">
+        {title}
+      </h3>
+      <p className="text-muted-foreground text-sm leading-relaxed">
+        {description}
+      </p>
+    </motion.div>
+  );
+}

package/template/apps/web/src/components/landing/included-feature-card.tsx

@@ -0,0 +1,63 @@
+import {
+  LayoutDashboard,
+  Lock,
+  Shield,
+  ShieldCheck,
+  Users,
+} from 'lucide-react';
+import Link from 'next/link';
+
+const iconMap = {
+  Lock,
+  Shield,
+  ShieldCheck,
+  LayoutDashboard,
+  Users,
+} as const;
+
+type IconName = keyof typeof iconMap;
+
+interface Page {
+  name: string;
+  href: string;
+}
+
+interface IncludedFeatureCardProps {
+  iconName: IconName;
+  title: string;
+  pages: readonly Page[];
+}
+
+export function IncludedFeatureCard({
+  iconName,
+  title,
+  pages,
+}: IncludedFeatureCardProps) {
+  const Icon = iconMap[iconName];
+
+  return (
+    <div className="bg-card rounded-lg border p-6">
+      <div className="mb-4">
+        <Icon className="text-foreground h-5 w-5" />
+      </div>
+
+      <h3 className="text-card-foreground mb-4 text-base font-medium">
+        {title}
+      </h3>
+
+      <div className="flex flex-wrap gap-2">
+        {pages.map((page) => (
+          <Link
+            key={page.href}
+            href={page.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="border-border hover:border-foreground/30 hover:bg-accent bg-background inline-flex items-center rounded-md border px-3 py-1.5 text-xs font-medium transition-colors"
+          >
+            {page.name}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

package/template/apps/web/src/components/landing/logo.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+interface LogoProps {
+  className?: string;
+}
+
+export function Logo({ className = 'h-16 w-auto' }: LogoProps) {
+  const { resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const fillPrimary =
+    mounted && resolvedTheme === 'dark' ? '#FFFFFF' : '#252525';
+  const fillSecondary =
+    mounted && resolvedTheme === 'dark' ? '#A3A3A3' : '#5A5A5A';
+
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 348 225"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Blitzpack Logo"
+    >
+      <path
+        d="M132.096 224.64V216.576C143.872 216.576 151.296 215.04 154.368 211.968L132.864 153.216H59.136L39.168 209.664C41.728 214.272 49.664 216.576 62.976 216.576V224.64H0V216.576C14.08 216.576 22.144 213.888 24.192 208.512L98.688 0H129.792L205.056 208.512C206.848 213.888 215.04 216.576 229.632 216.576V224.64H132.096ZM95.616 51.072L63.744 140.544H128.256L95.616 51.072Z"
+        fill={fillPrimary}
+      />
+      <path
+        d="M187.81 80.64H219.76V208.59H235.81C240.26 208.59 244.035 207.015 247.135 203.865C250.285 200.715 251.86 196.99 251.86 192.69V80.64H283.81V208.59H299.86C304.21 208.59 307.935 207.015 311.035 203.865C314.185 200.715 315.76 196.99 315.76 192.69V80.64H347.86V169.965C347.86 184.865 342.485 197.715 331.735 208.515C321.035 219.265 308.185 224.64 293.185 224.64H251.86V219.54C245.71 222.94 238.135 224.64 229.135 224.64H187.81V80.64Z"
+        fill={fillSecondary}
+      />
+    </svg>
+  );
+}

package/template/apps/web/src/components/landing/tech-badge.tsx

@@ -0,0 +1,11 @@
+interface TechBadgeProps {
+  children: React.ReactNode;
+}
+
+export function TechBadge({ children }: TechBadgeProps) {
+  return (
+    <span className="border-border/60 hover:border-foreground/40 hover:bg-accent/50 inline-flex items-center rounded-md border bg-transparent px-3 py-1.5 text-xs font-normal transition-all duration-200 hover:scale-105">
+      {children}
+    </span>
+  );
+}

package/template/apps/web/src/components/layout/auth-nav.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { Button } from '@repo/packages-ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@repo/packages-ui/dropdown-menu';
+import { LogOut, User } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+import { authClient } from '@/lib/auth';
+
+export function AuthNav() {
+  const router = useRouter();
+  const { data: session } = authClient.useSession();
+
+  const handleSignOut = async () => {
+    await authClient.signOut();
+    router.push('/');
+  };
+
+  if (!session?.user) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="flex items-center gap-2">
+          <User className="h-4 w-4" />
+          <span className="hidden sm:inline">
+            {session.user.name || session.user.email}
+          </span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href="/dashboard" className="cursor-pointer">
+            <User className="mr-2 h-4 w-4" />
+            Dashboard
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={handleSignOut} className="cursor-pointer">
+          <LogOut className="mr-2 h-4 w-4" />
+          Sign Out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/template/apps/web/src/components/layout/footer.tsx

@@ -0,0 +1,3 @@
+export function Footer() {
+  return <footer className="mt-12"></footer>;
+}