feat(web): import oh-my-openagent-web Next.js + Cloudflare Workers site
Imports the public marketing site previously living in ../oh-my-opencode-web. Independent of the npm plugin: own package.json, bun.lock, tsconfig.json. Not included in the published package — root files: array still only ships dist/, bin/, postinstall.mjs. Stack: - Next.js 15.5 App Router + RSC, deployed to Cloudflare Workers via @opennextjs/cloudflare (build target .open-next/worker.js). - Tailwind v4 + shadcn/ui primitives. - next-intl with 4 locales (en/ja/ko/zh) under app/[locale]/. - Playwright e2e tests under web/e2e/. - Custom domains ohmyopenagent.com (primary) and ohmyopencode.org (legacy alias) declared in web/wrangler.toml. Source files were re-formatted via `bun run format` to bring them in line with the existing .prettierrc (singleQuote: false). Functional code unchanged.
This commit is contained in:
YeonGyu-Kim
@@ -0,0 +1,149 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Menu, Search } from "lucide-react"
|
||||
import { Link } from "@/i18n/routing"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { DOC_SECTION_IDS, type DocSectionId } from "@/lib/docs-sections"
|
||||
|
||||
type DocsShellSection = {
|
||||
id: DocSectionId
|
||||
title: string
|
||||
}
|
||||
|
||||
export function DocsShell({
|
||||
mobileHeader,
|
||||
searchPlaceholder,
|
||||
sections,
|
||||
children,
|
||||
}: {
|
||||
mobileHeader: string
|
||||
searchPlaceholder: string
|
||||
sections: DocsShellSection[]
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
const [searchQuery, setSearchQuery] = React.useState("")
|
||||
const [activeSection, setActiveSection] = React.useState<DocSectionId>("overview")
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false)
|
||||
|
||||
const activeSectionRef = React.useRef<DocSectionId>("overview")
|
||||
|
||||
React.useEffect(() => {
|
||||
activeSectionRef.current = activeSection
|
||||
}, [activeSection])
|
||||
|
||||
const filteredSections = React.useMemo(() => {
|
||||
const query = searchQuery.trim().toLowerCase()
|
||||
if (!query) return sections
|
||||
return sections.filter((section) => section.title.toLowerCase().includes(query))
|
||||
}, [searchQuery, sections])
|
||||
|
||||
React.useEffect(() => {
|
||||
const sectionEls = DOC_SECTION_IDS.map((id) => document.getElementById(id))
|
||||
let rafId: number | null = null
|
||||
|
||||
const handleScroll = () => {
|
||||
if (rafId !== null) return
|
||||
|
||||
rafId = window.requestAnimationFrame(() => {
|
||||
rafId = null
|
||||
|
||||
const scrollPosition = window.scrollY + 100
|
||||
let nextActive: DocSectionId | null = null
|
||||
|
||||
for (let i = 0; i < sectionEls.length; i++) {
|
||||
const el = sectionEls[i]
|
||||
if (!el) continue
|
||||
if (el.offsetTop <= scrollPosition && el.offsetTop + el.offsetHeight > scrollPosition) {
|
||||
nextActive = el.id as DocSectionId
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (nextActive && nextActive !== activeSectionRef.current) {
|
||||
activeSectionRef.current = nextActive
|
||||
setActiveSection(nextActive)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", handleScroll, { passive: true })
|
||||
handleScroll()
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll)
|
||||
if (rafId !== null) window.cancelAnimationFrame(rafId)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const scrollToSection = (id: DocSectionId) => {
|
||||
const element = document.getElementById(id)
|
||||
if (!element) return
|
||||
|
||||
window.scrollTo({ top: element.offsetTop - 80, behavior: "auto" })
|
||||
activeSectionRef.current = id
|
||||
setActiveSection(id)
|
||||
setIsMobileMenuOpen(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-background text-foreground flex min-h-screen">
|
||||
<div className="bg-background/95 fixed top-0 right-0 left-0 z-50 flex items-center justify-between border-b px-4 py-3 backdrop-blur md:hidden">
|
||||
<Link href="/" className="font-bold">
|
||||
{mobileHeader}
|
||||
</Link>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
type="button"
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
aria-label="Toggle sidebar menu"
|
||||
>
|
||||
<Menu className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<aside
|
||||
className={`bg-background fixed inset-y-0 left-0 z-40 w-64 transform border-r transition-transform duration-200 ease-in-out md:translate-x-0 ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"} pt-16`}
|
||||
>
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="p-4">
|
||||
<div className="relative">
|
||||
<Search className="text-muted-foreground absolute top-2.5 left-2 h-4 w-4" />
|
||||
<Input
|
||||
placeholder={searchPlaceholder}
|
||||
className="pl-8"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="flex-1 overflow-y-auto px-2 pb-4">
|
||||
<ul className="space-y-1">
|
||||
{filteredSections.map((section) => (
|
||||
<li key={section.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => scrollToSection(section.id)}
|
||||
className={`w-full rounded-md px-3 py-2 text-left text-sm font-medium transition-colors ${
|
||||
activeSection === section.id
|
||||
? "bg-primary/10 text-primary"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
} `}
|
||||
>
|
||||
{section.title}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main className="flex-1 px-4 pt-20 pb-20 md:ml-64 md:px-8 md:pt-8">
|
||||
<div className="mx-auto max-w-4xl space-y-12">{children}</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { getTranslations } from "next-intl/server"
|
||||
import { Link } from "@/i18n/routing"
|
||||
|
||||
export async function Footer({ locale }: { locale?: string } = {}) {
|
||||
const t = locale
|
||||
? await getTranslations({ locale, namespace: "footer" })
|
||||
: await getTranslations("footer")
|
||||
const currentYear = new Date().getUTCFullYear()
|
||||
|
||||
return (
|
||||
<footer className="border-t border-white/10 bg-black py-12">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<div className="flex flex-col items-center justify-between gap-6 md:flex-row">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-lg font-bold text-white">{t("brand")}</span>
|
||||
<p className="text-sm text-zinc-400">
|
||||
{t("copyright", { year: currentYear.toString() })}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-8 text-sm text-zinc-400">
|
||||
<a
|
||||
href="https://github.com/code-yeongyu/oh-my-openagent"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="transition-colors hover:text-cyan-400"
|
||||
>
|
||||
{t("github")}
|
||||
</a>
|
||||
<a
|
||||
href="https://discord.gg/indentcorp"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="transition-colors hover:text-cyan-400"
|
||||
>
|
||||
{t("discord")}
|
||||
</a>
|
||||
<Link href="/docs" locale={locale} className="transition-colors hover:text-cyan-400">
|
||||
{t("documentation")}
|
||||
</Link>
|
||||
<Link
|
||||
href="/manifesto"
|
||||
locale={locale}
|
||||
className="transition-colors hover:text-cyan-400"
|
||||
>
|
||||
{t("manifesto")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
"use client"
|
||||
|
||||
import type { ReactNode } from "react"
|
||||
import { Star, Bot, Download, GitBranch } from "lucide-react"
|
||||
import { useLiveStats } from "./live-stats"
|
||||
|
||||
interface HeroStatsProps {
|
||||
initialStats: {
|
||||
stars: string
|
||||
totalDownloads: string
|
||||
monthlyDownloads: string
|
||||
weeklyDownloads: string
|
||||
}
|
||||
labels: {
|
||||
githubStars: string
|
||||
specializedAgents: string
|
||||
totalDownloads: string
|
||||
monthlyDownloads: string
|
||||
lifecycleHooks: string
|
||||
}
|
||||
}
|
||||
|
||||
export function HeroStats({ initialStats, labels }: HeroStatsProps): ReactNode {
|
||||
const stats = useLiveStats(initialStats)
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap justify-center gap-4 text-sm text-zinc-300 md:gap-8 md:text-base">
|
||||
<div className="flex items-center gap-2">
|
||||
<Star className="h-5 w-5 fill-yellow-400 text-yellow-400" />
|
||||
<span>{labels.githubStars.replace("{count}", stats.stars)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Bot className="h-5 w-5 text-cyan-400" />
|
||||
<span>{labels.specializedAgents}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Download className="h-5 w-5 text-green-400" />
|
||||
<span>{labels.totalDownloads.replace("{count}", stats.totalDownloads)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Download className="h-5 w-5 text-emerald-400" />
|
||||
<span>{labels.monthlyDownloads.replace("{count}", stats.monthlyDownloads)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<GitBranch className="h-5 w-5 text-purple-400" />
|
||||
<span>{labels.lifecycleHooks}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Copy, Check } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export function InstallCommand({ command }: { command: string }) {
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
const copyCommand = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(command)
|
||||
setCopied(true)
|
||||
window.setTimeout(() => setCopied(false), 2000)
|
||||
} catch (err) {
|
||||
console.warn("Failed to copy install command", err)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative rounded-lg border border-zinc-800 bg-black/50 p-4 font-mono text-sm text-zinc-300 shadow-2xl shadow-cyan-500/10 backdrop-blur-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-cyan-500">$</span>
|
||||
<span>{command}</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-zinc-400 hover:text-white"
|
||||
onClick={copyCommand}
|
||||
aria-label="Copy install command"
|
||||
>
|
||||
{copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
interface StatsData {
|
||||
stars: string
|
||||
totalDownloads: string
|
||||
monthlyDownloads: string
|
||||
weeklyDownloads: string
|
||||
}
|
||||
|
||||
export function useLiveStats(initial: StatsData): StatsData {
|
||||
const [stats, setStats] = useState<StatsData>(initial)
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
async function refresh() {
|
||||
try {
|
||||
const res = await fetch("/api/stats")
|
||||
if (!res.ok || cancelled) return
|
||||
const data = await res.json()
|
||||
if (cancelled) return
|
||||
setStats({
|
||||
stars: data.stars ?? initial.stars,
|
||||
totalDownloads: data.totalDownloads ?? initial.totalDownloads,
|
||||
monthlyDownloads: data.monthlyDownloads ?? initial.monthlyDownloads,
|
||||
weeklyDownloads: data.weeklyDownloads ?? initial.weeklyDownloads,
|
||||
})
|
||||
} catch {
|
||||
// keep SSG values on error
|
||||
}
|
||||
}
|
||||
refresh()
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [initial.stars, initial.totalDownloads, initial.monthlyDownloads, initial.weeklyDownloads])
|
||||
|
||||
return stats
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
"use client"
|
||||
|
||||
import { useRef, useEffect, useState } from "react"
|
||||
|
||||
interface TerminalTypewriterProps {
|
||||
text: string
|
||||
}
|
||||
|
||||
export function TerminalTypewriter({ text }: TerminalTypewriterProps) {
|
||||
const ref = useRef<HTMLSpanElement>(null)
|
||||
const [isInView, setIsInView] = useState(false)
|
||||
const [displayed, setDisplayed] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
const element = ref.current
|
||||
if (!element || isInView) return
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (!entry?.isIntersecting) return
|
||||
setIsInView(true)
|
||||
observer.disconnect()
|
||||
},
|
||||
{ threshold: 0.1 },
|
||||
)
|
||||
|
||||
observer.observe(element)
|
||||
|
||||
return () => observer.disconnect()
|
||||
}, [isInView])
|
||||
|
||||
useEffect(() => {
|
||||
if (!isInView) return
|
||||
let i = 0
|
||||
const interval = setInterval(() => {
|
||||
if (i <= text.length) {
|
||||
setDisplayed(text.slice(0, i))
|
||||
i++
|
||||
} else {
|
||||
clearInterval(interval)
|
||||
}
|
||||
}, 40)
|
||||
return () => clearInterval(interval)
|
||||
}, [isInView, text])
|
||||
|
||||
return (
|
||||
<span ref={ref} className="text-zinc-300">
|
||||
{displayed}
|
||||
{displayed.length < text.length && <span className="animate-pulse">_</span>}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useTranslations } from "next-intl"
|
||||
import { Github, Menu, X } from "lucide-react"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Link } from "@/i18n/routing"
|
||||
|
||||
export function NavHeader() {
|
||||
const t = useTranslations("nav")
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full border-b border-white/10 bg-black/50 backdrop-blur-xl">
|
||||
<div className="container mx-auto flex h-16 items-center justify-between px-4 md:px-6">
|
||||
<div className="flex items-center gap-6">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<span className="text-lg font-bold tracking-tight text-white">{t("brand")}</span>
|
||||
</Link>
|
||||
<nav className="hidden items-center gap-6 text-sm font-medium text-zinc-400 md:flex">
|
||||
<Link href="/#features" className="transition-colors hover:text-cyan-400">
|
||||
{t("features")}
|
||||
</Link>
|
||||
<Link href="/#agents" className="transition-colors hover:text-cyan-400">
|
||||
{t("agents")}
|
||||
</Link>
|
||||
<Link href="/docs" className="transition-colors hover:text-cyan-400">
|
||||
{t("docs")}
|
||||
</Link>
|
||||
<Link href="/manifesto" className="transition-colors hover:text-cyan-400">
|
||||
{t("manifesto")}
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<a
|
||||
href="https://github.com/code-yeongyu/oh-my-openagent"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hidden sm:flex"
|
||||
>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="gap-1 border-zinc-700 bg-zinc-800 text-zinc-300 hover:bg-zinc-700"
|
||||
>
|
||||
<Github className="h-3 w-3" />
|
||||
<span>{t("starOnGitHub")}</span>
|
||||
</Badge>
|
||||
</a>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-zinc-400 hover:bg-zinc-800 hover:text-white md:hidden"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
aria-label={isOpen ? "Close menu" : "Open menu"}
|
||||
aria-expanded={isOpen}
|
||||
aria-controls="mobile-nav"
|
||||
>
|
||||
{isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="mobile-nav"
|
||||
className={
|
||||
`overflow-hidden bg-black/95 backdrop-blur-xl transition-[max-height,opacity] duration-200 ease-in-out md:hidden ` +
|
||||
(isOpen
|
||||
? "max-h-[420px] border-b border-white/10 opacity-100"
|
||||
: "pointer-events-none max-h-0 opacity-0")
|
||||
}
|
||||
aria-hidden={!isOpen}
|
||||
>
|
||||
<nav className="flex flex-col gap-4 p-4 text-sm font-medium text-zinc-400">
|
||||
<Link
|
||||
href="/#features"
|
||||
className="transition-colors hover:text-cyan-400"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{t("features")}
|
||||
</Link>
|
||||
<Link
|
||||
href="/#agents"
|
||||
className="transition-colors hover:text-cyan-400"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{t("agents")}
|
||||
</Link>
|
||||
<Link
|
||||
href="/docs"
|
||||
className="transition-colors hover:text-cyan-400"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{t("docs")}
|
||||
</Link>
|
||||
<Link
|
||||
href="/manifesto"
|
||||
className="transition-colors hover:text-cyan-400"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{t("manifesto")}
|
||||
</Link>
|
||||
<a
|
||||
href="https://github.com/code-yeongyu/oh-my-openagent"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 transition-colors hover:text-cyan-400 sm:hidden"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<Github className="h-4 w-4" />
|
||||
<span>{t("starOnGitHub")}</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as AccordionPrimitive from "@radix-ui/react-accordion"
|
||||
import { ChevronDown } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Accordion = AccordionPrimitive.Root
|
||||
|
||||
const AccordionItem = React.forwardRef<
|
||||
React.ElementRef<typeof AccordionPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
|
||||
))
|
||||
AccordionItem.displayName = "AccordionItem"
|
||||
|
||||
const AccordionTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof AccordionPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronDown className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
))
|
||||
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
|
||||
|
||||
const AccordionContent = React.forwardRef<
|
||||
React.ElementRef<typeof AccordionPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<AccordionPrimitive.Content
|
||||
ref={ref}
|
||||
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
|
||||
{...props}
|
||||
>
|
||||
<div className={cn("pt-0 pb-4", className)}>{children}</div>
|
||||
</AccordionPrimitive.Content>
|
||||
))
|
||||
AccordionContent.displayName = AccordionPrimitive.Content.displayName
|
||||
|
||||
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
|
||||
@@ -0,0 +1,31 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "border-transparent bg-primary text-primary-foreground shadow",
|
||||
secondary: "border-transparent bg-secondary text-secondary-foreground",
|
||||
destructive: "border-transparent bg-destructive text-destructive-foreground shadow",
|
||||
outline: "text-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
export interface BadgeProps
|
||||
extends React.HTMLAttributes<HTMLSpanElement>,
|
||||
VariantProps<typeof badgeVariants> {}
|
||||
|
||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||
return <span className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
@@ -0,0 +1,50 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
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-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||
destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
||||
secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2",
|
||||
sm: "h-8 rounded-md px-3 text-xs",
|
||||
lg: "h-10 rounded-md px-8",
|
||||
icon: "h-9 w-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
return (
|
||||
<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
|
||||
)
|
||||
},
|
||||
)
|
||||
Button.displayName = "Button"
|
||||
|
||||
export { Button, buttonVariants }
|
||||
@@ -0,0 +1,55 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("bg-card text-card-foreground rounded-xl border shadow", className)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
)
|
||||
Card.displayName = "Card"
|
||||
|
||||
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
|
||||
),
|
||||
)
|
||||
CardHeader.displayName = "CardHeader"
|
||||
|
||||
const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("leading-none font-semibold tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
)
|
||||
CardTitle.displayName = "CardTitle"
|
||||
|
||||
const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
|
||||
),
|
||||
)
|
||||
CardDescription.displayName = "CardDescription"
|
||||
|
||||
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||
),
|
||||
)
|
||||
CardContent.displayName = "CardContent"
|
||||
|
||||
const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
|
||||
),
|
||||
)
|
||||
CardFooter.displayName = "CardFooter"
|
||||
|
||||
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
||||
@@ -0,0 +1,23 @@
|
||||
import * as React from "react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
code: string
|
||||
language?: string
|
||||
}
|
||||
|
||||
export function CodeBlock({ code, language = "json", className, ...props }: CodeBlockProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"border-border/50 relative my-4 overflow-x-auto rounded-lg border bg-[#1e1e2e] p-4 font-mono text-sm text-[#cdd6f4] shadow-sm",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<pre>
|
||||
<code className={`language-${language}`}>{code}</code>
|
||||
</pre>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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(
|
||||
"border-input file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
},
|
||||
)
|
||||
Input.displayName = "Input"
|
||||
|
||||
export { Input }
|
||||
@@ -0,0 +1,48 @@
|
||||
import * as React from "react"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export interface Option {
|
||||
name: string
|
||||
type: string
|
||||
default?: string
|
||||
description: string
|
||||
}
|
||||
|
||||
interface OptionTableProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
options: Option[]
|
||||
}
|
||||
|
||||
export function OptionTable({ options, className, ...props }: OptionTableProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn("border-border my-4 w-full overflow-x-auto rounded-lg border", className)}
|
||||
{...props}
|
||||
>
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-muted/50 text-left font-medium">
|
||||
<tr>
|
||||
<th className="p-3">Option</th>
|
||||
<th className="p-3">Type</th>
|
||||
<th className="p-3">Default</th>
|
||||
<th className="p-3">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-border divide-y">
|
||||
{options.map((opt) => (
|
||||
<tr key={opt.name}>
|
||||
<td className="text-primary p-3 font-mono font-medium">{opt.name}</td>
|
||||
<td className="p-3">
|
||||
<Badge variant="outline" className="font-mono text-xs">
|
||||
{opt.type}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="text-muted-foreground p-3 font-mono">{opt.default || "-"}</td>
|
||||
<td className="text-muted-foreground p-3">{opt.description}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import * as React from "react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface SectionProps extends React.ComponentPropsWithoutRef<"section"> {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export function Section({ children, className, ...props }: SectionProps) {
|
||||
return (
|
||||
<section className={cn("px-6 py-24 md:py-32", className)} {...props}>
|
||||
{children}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Separator = React.forwardRef<
|
||||
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
||||
>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
|
||||
<SeparatorPrimitive.Root
|
||||
ref={ref}
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"bg-border shrink-0",
|
||||
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Separator.displayName = SeparatorPrimitive.Root.displayName
|
||||
|
||||
export { Separator }
|
||||
Reference in New Issue
Block a user