beyhan/next-fiber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Beyhan Oğur
2026-04-26 22:14:08 +03:00
commit b2825e1698
41 changed files with 14258 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
components/auth-social-buttons.tsx Normal file
View File

@@ -0,0 +1,80 @@
"use client";
import { signIn } from "next-auth/react";
/** Google ve GitHub ile giriş butonları. callbackUrl OAuth sonrası yönlenecek sayfa. */
export function AuthSocialButtons({
callbackUrl = "/",
disabled = false,
}: {
callbackUrl?: string;
disabled?: boolean;
}) {
return (
<>
<div className="relative my-4">
<div className="absolute inset-0 flex items-center">
<span className="w-full border-t border-neutral-200 dark:border-neutral-700" />
</div>
<p className="relative flex justify-center text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
<span className="bg-white px-2 dark:bg-neutral-900">veya</span>
</p>
</div>
<div className="flex flex-col gap-2 sm:flex-row sm:gap-3">
<button
type="button"
disabled={disabled}
onClick={() => signIn("google", { callbackUrl })}
className="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-sm font-medium text-neutral-700 shadow-xs transition hover:bg-neutral-50 disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
>
<GoogleIcon className="size-5" />
Google ile giriş
</button>
<button
type="button"
disabled={disabled}
onClick={() => signIn("github", { callbackUrl })}
className="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-sm font-medium text-neutral-700 shadow-xs transition hover:bg-neutral-50 disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
>
<GitHubIcon className="size-5" />
GitHub ile giriş
</button>
</div>
</>
);
}
function GoogleIcon({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 24 24" aria-hidden>
<path
fill="#4285F4"
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"
/>
<path
fill="#34A853"
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"
/>
<path
fill="#FBBC05"
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"
/>
<path
fill="#EA4335"
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"
/>
</svg>
);
}
function GitHubIcon({ className }: { className?: string }) {
return (
<svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden>
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
);
}

62
components/banner.tsx Normal file
View File

@@ -0,0 +1,62 @@
import React from "react";
import { Search } from "lucide-react";
export default function Banner() {
return (
<section className="relative">
{/* Full-bleed hero image */}
<div className="w-screen relative left-1/2 right-1/2 -translate-x-1/2">
<img
src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1920&h=750&q=80&auto=format&fit=crop"
alt="Hero"
className="h-[750px] w-full object-cover"
/>
</div>
{/* Content container below the hero (no login/register) */}
<div className="container mx-auto px-4 py-8">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div className="lg:col-span-2">
<div className="rounded-2xl bg-white p-6 shadow-sm dark:bg-neutral-900">
<h2 className="text-3xl font-bold mb-2">Welcome to Next Fiber</h2>
<p className="text-sm text-muted-foreground">Discover articles, projects and updates from the team. Explore our latest posts and tutorials.</p>
</div>
</div>
<aside className="space-y-6">
<div className="rounded-lg border bg-white p-4 shadow-sm dark:bg-neutral-900">
<div className="relative flex items-center gap-2 rounded-md bg-gray-100 px-3 py-2">
<Search className="size-4 text-gray-600" />
<input placeholder="Write your keyword..." className="w-full bg-transparent outline-none text-sm" />
</div>
</div>
<div className="rounded-lg border bg-white p-4 shadow-sm dark:bg-neutral-900">
<h3 className="mb-3 font-semibold">Popular Posts</h3>
<ul className="space-y-3">
<li className="flex items-start gap-3">
<img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=80&q=60&auto=format&fit=crop" className="h-12 w-12 rounded-full object-cover" />
<div>
<div className="text-sm font-medium">How Wireless Technology is Changing Business</div>
</div>
</li>
<li className="flex items-start gap-3">
<img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=80&q=60&auto=format&fit=crop" className="h-12 w-12 rounded-full object-cover" />
<div>
<div className="text-sm font-medium">Designing Faster Interfaces</div>
</div>
</li>
<li className="flex items-start gap-3">
<img src="https://images.unsplash.com/photo-1503342452485-86f7f3f45e2b?w=80&q=60&auto=format&fit=crop" className="h-12 w-12 rounded-full object-cover" />
<div>
<div className="text-sm font-medium">Productivity Tips for Developers</div>
</div>
</li>
</ul>
</div>
</aside>
</div>
</div>
</section>
);
}

133
components/blog-content.tsx Normal file
View File

@@ -0,0 +1,133 @@
import React from "react";
import Link from "next/link";
import {
Search,
FileText,
User,
MessageCircle,
Calendar,
ArrowRight,
} from "lucide-react";
const popularPosts = [
{
title: "How Wireless Technology is Changing Business",
date: "May 15, 2020",
image:
"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=80&h=80&q=60&auto=format&fit=crop",
},
{
title: "How Wireless Technology is Changing Business",
date: "May 15, 2020",
image:
"https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=80&h=80&q=60&auto=format&fit=crop",
},
{
title: "How Wireless Technology is Changing Business",
date: "May 15, 2020",
image:
"https://images.unsplash.com/photo-1503342452485-86f7f3f45e2b?w=80&h=80&q=60&auto=format&fit=crop",
},
];
export default function BlogContent() {
return (
<section className="container mx-auto px-4 py-10 lg:py-12">
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
{/* Main: Featured article */}
<article className="lg:col-span-2">
<div className="overflow-hidden rounded-xl bg-white shadow-sm dark:bg-neutral-900 dark:shadow-none">
<div className="relative aspect-[2/1] w-full overflow-hidden bg-neutral-100 dark:bg-neutral-800">
<img
src="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=800&h=400&q=80&auto=format&fit=crop"
alt="How to become a successful businessman"
className="h-full w-full object-cover"
width={800}
height={400}
/>
<div className="absolute left-4 top-4 rounded-md bg-violet-600/90 px-3 py-1.5 text-sm font-medium text-white">
08 Aug
</div>
</div>
<div className="p-6">
<div className="mb-3 flex flex-wrap items-center gap-x-5 gap-y-1 text-sm text-neutral-500 dark:text-neutral-400">
<span className="flex items-center gap-1.5">
<FileText className="size-4" />
Technology / Business
</span>
<span className="flex items-center gap-1.5">
<User className="size-4" />
Andrew Paker
</span>
<span className="flex items-center gap-1.5">
<MessageCircle className="size-4" />
0 Comments
</span>
</div>
<h2 className="mb-3 text-2xl font-bold text-neutral-900 dark:text-white lg:text-3xl">
How to become a successful businessman
</h2>
<p className="mb-4 text-neutral-600 dark:text-neutral-300">
Accelerate innovation with world-class tech teams We'll match
you to an entire remote team of incredible freelance talent for
all your software development needs.
</p>
<Link
href="#"
className="inline-flex items-center gap-1.5 text-sm font-semibold text-neutral-900 hover:text-violet-600 dark:text-white dark:hover:text-violet-400"
>
READ FULL
<ArrowRight className="size-4" />
</Link>
</div>
</div>
</article>
{/* Sidebar */}
<aside className="space-y-6">
<div className="rounded-xl bg-white p-4 shadow-sm dark:bg-neutral-900 dark:shadow-none">
<div className="flex items-center gap-2 rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2.5 dark:border-neutral-700 dark:bg-neutral-800">
<Search className="size-4 shrink-0 text-neutral-500" />
<input
type="search"
placeholder="Write your keyword..."
className="w-full bg-transparent text-sm outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400"
/>
</div>
</div>
<div className="rounded-xl bg-white p-5 shadow-sm dark:bg-neutral-900 dark:shadow-none">
<h3 className="mb-4 font-bold text-neutral-900 dark:text-white">
Popular Posts
</h3>
<ul className="space-y-4">
{popularPosts.map((post, i) => (
<li key={i}>
<Link
href="#"
className="flex gap-3 transition-opacity hover:opacity-80"
>
<img
src={post.image}
alt=""
className="h-14 w-14 shrink-0 rounded-full object-cover"
/>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium leading-snug text-neutral-900 dark:text-white">
{post.title}
</p>
<p className="mt-1 flex items-center gap-1.5 text-xs text-neutral-500 dark:text-neutral-400">
<Calendar className="size-3.5" />
{post.date}
</p>
</div>
</Link>
</li>
))}
</ul>
</div>
</aside>
</div>
</section>
);
}

49
components/blog-hero.tsx Normal file
View File

@@ -0,0 +1,49 @@
import React from "react";
import Link from "next/link";
export default function BlogHero() {
return (
<section className="relative h-[750px] w-full overflow-hidden bg-neutral-200 dark:bg-neutral-800">
{/* Gradient blobs */}
<div
className="absolute -left-[20%] -top-[30%] h-[80%] w-[60%] rounded-full opacity-90 blur-2xl"
style={{
background:
"linear-gradient(135deg, rgba(59, 130, 246, 0.5) 0%, rgba(99, 102, 241, 0.4) 50%, rgba(139, 92, 246, 0.3) 100%)",
}}
/>
<div
className="absolute -bottom-[25%] -right-[15%] h-[70%] w-[55%] rounded-full opacity-90 blur-2xl"
style={{
background:
"linear-gradient(315deg, rgba(139, 92, 246, 0.5) 0%, rgba(99, 102, 241, 0.4) 50%, rgba(59, 130, 246, 0.25) 100%)",
}}
/>
{/* Subtle curve lines (optional decoration) */}
<svg
className="absolute right-[15%] top-1/2 h-48 w-48 -translate-y-1/2 opacity-[0.07]"
viewBox="0 0 100 100"
fill="none"
stroke="white"
strokeWidth="0.5"
>
<path d="M10 50 Q50 20 90 50 Q50 80 10 50" />
<path d="M20 50 Q50 30 80 50" />
</svg>
{/* Content */}
<div className="container relative z-10 mx-auto flex h-full min-h-0 flex-col items-center justify-center px-4 text-center">
<h1 className="text-4xl font-bold tracking-tight text-white drop-shadow-md md:text-5xl lg:text-6xl">
Blog Grid
</h1>
<nav className="mt-3 flex items-center gap-1.5 text-sm text-white/95">
<Link href="/" className="hover:underline">
Home
</Link>
<span className="opacity-70">/</span>
<span className="text-white">Blog Grid</span>
</nav>
</div>
</section>
);
}

181
components/header.tsx Normal file
View File

@@ -0,0 +1,181 @@
"use client";
import React, { useEffect, useState } from "react";
import Link from "next/link";
import { useSession, signOut } from "next-auth/react";
import clsx from "clsx";
import { Search, ShoppingCart, ChevronDown, LogOut, User } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ThemeToggle } from "@/components/theme-toggle";
import {
getCookieSession,
logoutViaCookie,
clearTokens,
AUTH_CHANGE_EVENT,
notifyAuthChange,
} from "@/lib/auth-api";
const navItems = [
{ label: "Home", href: "/", hasDropdown: true },
{ label: "About Us", href: "/about", hasDropdown: false },
{ label: "Pages", href: "/pages", hasDropdown: true },
{ label: "Blog", href: "/blog", hasDropdown: true, active: true },
{ label: "Contact", href: "/contact", hasDropdown: false },
];
function TechwixLogo() {
return (
<Link href="/" className="flex items-center gap-2">
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="shrink-0"
>
<defs>
<linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#3b82f6" />
<stop offset="100%" stopColor="#8b5cf6" />
</linearGradient>
</defs>
{/* Single gradient shape - diamond/arrowhead */}
<path
d="M16 5L27 16L16 27L5 16L16 5Z"
fill="url(#logoGrad)"
/>
<path
d="M16 9L23 16L16 23L9 16L16 9Z"
fill="white"
fillOpacity="0.2"
/>
</svg>
<span className="text-xl font-semibold text-neutral-800 dark:text-neutral-100">
Techwix
</span>
</Link>
);
}
export default function Header() {
const [scrolled, setScrolled] = useState(false);
const { data: session, status } = useSession();
const [cookieLoggedIn, setCookieLoggedIn] = useState(false);
const isLoggedIn = Boolean(session?.user) || cookieLoggedIn;
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 8);
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
return () => window.removeEventListener("scroll", onScroll);
}, []);
const refreshCookieSession = () => {
getCookieSession().then((s) => setCookieLoggedIn(s.loggedIn));
};
useEffect(() => {
refreshCookieSession();
const handler = () => refreshCookieSession();
window.addEventListener(AUTH_CHANGE_EVENT, handler);
return () => window.removeEventListener(AUTH_CHANGE_EVENT, handler);
}, []);
const handleLogout = async () => {
clearTokens(); // eski localStorage token varsa temizle
await logoutViaCookie();
signOut({ callbackUrl: "/" });
setCookieLoggedIn(false);
notifyAuthChange();
};
return (
<header
className={clsx(
"sticky top-0 z-40 w-full border-b border-neutral-200/80 transition-colors duration-200 backdrop-blur dark:border-neutral-800",
scrolled
? "bg-white/95 shadow-sm dark:bg-neutral-950/95"
: "bg-white dark:bg-neutral-950/90"
)}
>
<div className="container mx-auto flex h-16 items-center justify-between gap-6 px-4 lg:px-6">
<TechwixLogo />
<nav className="hidden items-center gap-1 md:flex">
{navItems.map((item) => (
<Link
key={item.href}
href={item.href}
className={clsx(
"flex items-center gap-0.5 rounded-md px-3 py-2 text-sm font-medium transition-colors",
item.active
? "text-blue-500 dark:text-blue-400"
: "text-neutral-700 hover:text-neutral-900 dark:text-neutral-300 dark:hover:text-white"
)}
>
{item.label}
{item.hasDropdown && (
<ChevronDown className="size-3.5 text-current opacity-70" />
)}
</Link>
))}
</nav>
<div className="flex items-center gap-2">
<ThemeToggle />
<button
type="button"
className="relative rounded-md p-2 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
aria-label="Cart"
>
<ShoppingCart className="size-5" />
<span className="absolute -right-0.5 -top-0.5 flex size-4 items-center justify-center rounded-full bg-blue-500 text-[10px] font-medium text-white">
0
</span>
</button>
<button
type="button"
className="rounded-md p-2 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
aria-label="Search"
>
<Search className="size-5" />
</button>
{status === "loading" ? null : isLoggedIn ? (
<>
<Link
href="/profile"
className="flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-white"
>
<User className="size-4" />
<span className="hidden sm:inline">Profil</span>
</Link>
<button
type="button"
onClick={handleLogout}
className="flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-white"
>
<LogOut className="size-4" />
<span className="hidden sm:inline">Çıkış</span>
</button>
</>
) : (
<>
<Button variant="ghost" size="sm" asChild>
<Link href="/auth/login">Giriş</Link>
</Button>
<Button
asChild
size="sm"
className="rounded-md bg-gradient-to-r from-blue-500 to-blue-400 text-white shadow-sm hover:from-blue-600 hover:to-blue-500 dark:from-blue-600 dark:to-blue-500 dark:hover:from-blue-700 dark:hover:to-blue-600"
>
<Link href="/auth/register">Kayıt</Link>
</Button>
</>
)}
</div>
</div>
</header>
);
}

8
components/providers/session-provider.tsx Normal file
View File

@@ -0,0 +1,8 @@
"use client";
import { SessionProvider as NextAuthSessionProvider } from "next-auth/react";
import type { ReactNode } from "react";
export function SessionProvider({ children }: { children: ReactNode }) {
return <NextAuthSessionProvider>{children}</NextAuthSessionProvider>;
}

46
components/theme-provider.tsx Normal file
View File

@@ -0,0 +1,46 @@
"use client";
import React, { createContext, useContext, useEffect, useState } from "react";
type Theme = "light" | "dark";
const ThemeContext = createContext<{
theme: Theme;
setTheme: (theme: Theme) => void;
toggleTheme: () => void;
} | null>(null);
const STORAGE_KEY = "techwix-theme";
export function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setThemeState] = useState<Theme>("light");
const [mounted, setMounted] = useState(false);
useEffect(() => {
const isDark = document.documentElement.classList.contains("dark");
setThemeState(isDark ? "dark" : "light");
setMounted(true);
}, []);
const setTheme = (next: Theme) => {
setThemeState(next);
localStorage.setItem(STORAGE_KEY, next);
document.documentElement.classList.toggle("dark", next === "dark");
};
const toggleTheme = () => {
setTheme(theme === "dark" ? "light" : "dark");
};
return (
<ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
export function useTheme() {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
return ctx;
}

25
components/theme-toggle.tsx Normal file
View File

@@ -0,0 +1,25 @@
"use client";
import React from "react";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "@/components/theme-provider";
export function ThemeToggle() {
const { theme, toggleTheme } = useTheme();
return (
<button
type="button"
onClick={toggleTheme}
className="rounded-md p-2 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
aria-label={theme === "dark" ? "Aydınlık temaya geç" : "Koyu temaya geç"}
title={theme === "dark" ? "Aydınlık tema" : "Koyu tema"}
>
{theme === "dark" ? (
<Sun className="size-5" />
) : (
<Moon className="size-5" />
)}
</button>
);
}

64
components/ui/button.tsx Normal file
View File

@@ -0,0 +1,64 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9",
"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
"icon-sm": "size-8",
"icon-lg": "size-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
function Button({
className,
variant = "default",
size = "default",
asChild = false,
...props
}: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean
}) {
const Comp = asChild ? Slot.Root : "button"
return (
<Comp
data-slot="button"
data-variant={variant}
data-size={size}
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
)
}
export { Button, buttonVariants }

22
components/ui/input.tsx Normal file
View File

@@ -0,0 +1,22 @@
import * as React from "react";
import { cn } from "@/lib/utils";
const Input = React.forwardRef<
HTMLInputElement,
React.ComponentProps<"input">
>(({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 dark:border-input dark:bg-input/10",
className
)}
ref={ref}
{...props}
/>
);
});
Input.displayName = "Input";
export { Input };

19
components/ui/label.tsx Normal file
View File

@@ -0,0 +1,19 @@
import * as React from "react";
import { cn } from "@/lib/utils";
const Label = React.forwardRef<
HTMLLabelElement,
React.ComponentProps<"label">
>(({ className, ...props }, ref) => (
<label
ref={ref}
className={cn(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
className
)}
{...props}
/>
));
Label.displayName = "Label";
export { Label };