first commit

Made-with: Cursor

frontend/components/ui/Button.tsx

@@ -0,0 +1,41 @@
+import { type ButtonHTMLAttributes, forwardRef } from "react";
+import { cn } from "@/lib/utils";
+
+type ButtonVariant = "primary" | "secondary" | "tertiary" | "telegram";
+type ButtonSize = "sm" | "md" | "lg";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+const variantStyles: Record<ButtonVariant, string> = {
+  primary:
+    "bg-gradient-to-r from-primary to-primary-container text-on-primary font-bold hover:scale-105 active:opacity-80 transition-all",
+  secondary:
+    "bg-surface-container-highest text-on-surface hover:bg-surface-bright transition-colors",
+  tertiary: "text-primary-fixed-dim hover:opacity-80 transition-opacity",
+  telegram:
+    "bg-[#24A1DE] text-white hover:opacity-90 transition-opacity",
+};
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: "px-4 py-2 text-sm rounded-md",
+  md: "px-6 py-2.5 rounded-lg",
+  lg: "px-10 py-4 rounded-lg font-bold",
+};
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "primary", size = "md", className, children, ...rest }, ref) => (
+    <button
+      ref={ref}
+      className={cn(variantStyles[variant], sizeStyles[size], className)}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+);
+
+Button.displayName = "Button";
+export { Button, type ButtonProps };

frontend/components/ui/Card.tsx

@@ -0,0 +1,27 @@
+import { type HTMLAttributes, forwardRef } from "react";
+import { cn } from "@/lib/utils";
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  hover?: boolean;
+  variant?: "low" | "default";
+}
+
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ hover, variant = "low", className, children, ...rest }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "rounded-xl p-6",
+        variant === "low" ? "bg-surface-container-low" : "bg-surface-container",
+        hover && "hover:bg-surface-container-high transition-colors",
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+);
+
+Card.displayName = "Card";
+export { Card, type CardProps };