slices.network
Highly ambitious ATProtocol AppView service and sdks
chadtmiller.com
add new frontend client using graphql and relay, get graphql schema at feature parity with the xrpc endpoints
1import { Link } from "react-router-dom";
2import { cn } from "../utils/cn.ts";
3
4interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
5 to?: string;
6 variant?: "default" | "primary" | "link" | "danger";
7 size?: "sm" | "md" | "lg";
8}
9
10export function Button({ children, to, type = "button", variant = "default", size = "md", className, ...props }: ButtonProps) {
11 const sizeClasses = {
12 sm: "px-3 py-1.5 text-xs",
13 md: "px-4 py-2 text-sm",
14 lg: "px-6 py-3 text-base",
15 };
16
17 const variantClasses =
18 variant === "primary"
19 ? "text-zinc-300 bg-zinc-800 hover:bg-zinc-700 rounded"
20 : variant === "link"
21 ? "text-zinc-500 hover:text-zinc-300 px-2 py-1"
22 : variant === "danger"
23 ? "bg-red-900 text-red-100 border border-red-800 hover:bg-red-800 hover:border-red-700 rounded"
24 : "text-zinc-400 border border-zinc-800 hover:border-zinc-700 hover:text-zinc-300 rounded";
25
26 const baseClassName = cn(
27 sizeClasses[size],
28 variantClasses,
29 "transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
30 );
31
32 if (to) {
33 return (
34 <Link to={to} className={cn(baseClassName, className)}>
35 {children}
36 </Link>
37 );
38 }
39
40 return (
41 <button type={type} className={cn(baseClassName, className)} {...props}>
42 {children}
43 </button>
44 );
45}