init

src/components/ui/Badge.tsx

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react';
+
+export const Badge = ({ children }: PropsWithChildren) => (
+  <span className='px-2 py-0.5 rounded-full border text-xs bg-gray-50'>{children}</span>
+);
+
+

src/components/ui/Button.tsx

@@ -0,0 +1,21 @@
+import type { ButtonHTMLAttributes, PropsWithChildren } from 'react';
+
+import { cls } from '../../utils/cls';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, PropsWithChildren {
+  className?: string;
+}
+
+export const Button = ({ className = '', children, ...rest }: ButtonProps) => (
+  <button
+    className={cls(
+      'inline-flex items-center gap-2 px-4 py-2 rounded-2xl border text-sm bg-white hover:bg-gray-50 transition-colors',
+      className,
+    )}
+    {...rest}
+  >
+    {children}
+  </button>
+);
+
+

src/components/ui/Card.tsx

@@ -0,0 +1,21 @@
+import type { PropsWithChildren } from 'react';
+
+import { cls } from '../../utils/cls';
+
+interface CardProps extends PropsWithChildren {
+  className?: string;
+}
+
+export const Card = ({ className = '', children }: CardProps) => (
+  <div className={cls('rounded-2xl border bg-white shadow-sm', className)}>{children}</div>
+);
+
+export const CardHeader = ({ children }: PropsWithChildren) => (
+  <div className='px-5 pt-4 pb-2 font-medium flex items-center justify-between'>{children}</div>
+);
+
+export const CardContent = ({ children }: PropsWithChildren) => (
+  <div className='px-5 pb-5'>{children}</div>
+);
+
+

src/components/ui/InfoCard.tsx

@@ -0,0 +1,13 @@
+interface InfoCardProps {
+  label: React.ReactNode;
+  value: React.ReactNode;
+}
+
+export const InfoCard = ({ label, value }: InfoCardProps) => (
+  <div className='p-3 rounded-xl border flex items-center justify-between text-sm'>
+    <span>{label}</span>
+    <span className='text-lg font-semibold'>{value}</span>
+  </div>
+);
+
+

src/components/ui/Input.tsx

@@ -0,0 +1,19 @@
+import type { InputHTMLAttributes } from 'react';
+
+import { cls } from '../../utils/cls';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  className?: string;
+}
+
+export const Input = ({ className = '', ...rest }: InputProps) => (
+  <input
+    className={cls(
+      'w-full rounded-2xl border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-gray-200',
+      className,
+    )}
+    {...rest}
+  />
+);
+
+

src/components/ui/index.ts

@@ -0,0 +1,7 @@
+export * from './Badge';
+export * from './Button';
+export * from './Card';
+export * from './InfoCard';
+export * from './Input';
+
+