gitea

frontend/components/ui/badge.tsx

@@ -0,0 +1,40 @@
+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-full px-2.5 py-0.5 text-xs font-medium transition-colors",
+    {
+        variants: {
+            variant: {
+                default:
+                    "bg-primary/10 text-primary",
+                secondary:
+                    "bg-secondary text-secondary-foreground",
+                destructive:
+                    "bg-destructive/10 text-destructive",
+                success:
+                    "bg-green-100 text-green-700",
+                warning:
+                    "bg-yellow-100 text-yellow-700",
+                outline:
+                    "border border-border text-foreground",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    }
+)
+
+export interface BadgeProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> { }
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+    return (
+        <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    )
+}
+
+export { Badge, badgeVariants }

frontend/components/ui/button.tsx

@@ -0,0 +1,85 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+    "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98]",
+    {
+        variants: {
+            variant: {
+                default:
+                    "bg-primary text-primary-foreground shadow-md hover:bg-primary/90 hover:shadow-lg",
+                destructive:
+                    "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+                outline:
+                    "border border-border bg-background hover:bg-secondary hover:text-secondary-foreground",
+                secondary:
+                    "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+                ghost:
+                    "hover:bg-secondary hover:text-secondary-foreground",
+                link:
+                    "text-primary underline-offset-4 hover:underline",
+                success:
+                    "bg-success text-success-foreground shadow-sm hover:bg-success/90",
+                warning:
+                    "bg-warning text-warning-foreground shadow-sm hover:bg-warning/90",
+            },
+            size: {
+                default: "h-10 px-4 py-2",
+                sm: "h-9 rounded-md px-3 text-xs",
+                lg: "h-12 rounded-lg px-8 text-base",
+                icon: "h-10 w-10",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    }
+)
+
+export interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+    loading?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, loading, children, disabled, ...props }, ref) => {
+        return (
+            <button
+                className={cn(buttonVariants({ variant, size, className }))}
+                ref={ref}
+                disabled={disabled || loading}
+                {...props}
+            >
+                {loading && (
+                    <svg
+                        className="mr-2 h-4 w-4 animate-spin"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                    >
+                        <circle
+                            className="opacity-25"
+                            cx="12"
+                            cy="12"
+                            r="10"
+                            stroke="currentColor"
+                            strokeWidth="4"
+                        />
+                        <path
+                            className="opacity-75"
+                            fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        />
+                    </svg>
+                )}
+                {children}
+            </button>
+        )
+    }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

frontend/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & { hover?: boolean }
+>(({ className, hover = false, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "rounded-xl border border-border bg-card text-card-foreground shadow-sm transition-all duration-200",
+            hover && "hover:shadow-md hover:border-primary/30 cursor-pointer",
+            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<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h3
+        ref={ref}
+        className={cn(
+            "text-lg font-semibold leading-none tracking-tight",
+            className
+        )}
+        {...props}
+    />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <p
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", 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 }

frontend/components/ui/input.tsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string
+    error?: string
+    hint?: string
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+    ({ className, type, label, error, hint, id, ...props }, ref) => {
+        const inputId = id || React.useId()
+
+        return (
+            <div className="w-full">
+                {label && (
+                    <label
+                        htmlFor={inputId}
+                        className="mb-1.5 block text-sm font-medium text-foreground"
+                    >
+                        {label}
+                    </label>
+                )}
+                <input
+                    type={type}
+                    id={inputId}
+                    className={cn(
+                        "flex h-10 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm 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 focus-visible:border-transparent disabled:cursor-not-allowed disabled:opacity-50",
+                        error && "border-destructive focus-visible:ring-destructive",
+                        className
+                    )}
+                    ref={ref}
+                    {...props}
+                />
+                {hint && !error && (
+                    <p className="mt-1 text-xs text-muted-foreground">{hint}</p>
+                )}
+                {error && (
+                    <p className="mt-1 text-xs text-destructive">{error}</p>
+                )}
+            </div>
+        )
+    }
+)
+Input.displayName = "Input"
+
+export { Input }

frontend/components/ui/select.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string
+    error?: string
+    hint?: string
+    options: { value: string | number; label: string }[]
+}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+    ({ className, label, error, hint, id, options, ...props }, ref) => {
+        const selectId = id || React.useId()
+
+        return (
+            <div className="w-full">
+                {label && (
+                    <label
+                        htmlFor={selectId}
+                        className="mb-1.5 block text-sm font-medium text-foreground"
+                    >
+                        {label}
+                    </label>
+                )}
+                <select
+                    id={selectId}
+                    className={cn(
+                        "flex h-10 w-full appearance-none rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent disabled:cursor-not-allowed disabled:opacity-50",
+                        "bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E')] bg-[length:1.25rem] bg-[right_0.5rem_center] bg-no-repeat pr-10",
+                        error && "border-destructive focus-visible:ring-destructive",
+                        className
+                    )}
+                    ref={ref}
+                    {...props}
+                >
+                    {options.map((option) => (
+                        <option key={option.value} value={option.value}>
+                            {option.label}
+                        </option>
+                    ))}
+                </select>
+                {hint && !error && (
+                    <p className="mt-1 text-xs text-muted-foreground">{hint}</p>
+                )}
+                {error && (
+                    <p className="mt-1 text-xs text-destructive">{error}</p>
+                )}
+            </div>
+        )
+    }
+)
+Select.displayName = "Select"
+
+export { Select }