first day of vibe coding

components/ui/Badge.tsx

@@ -0,0 +1,36 @@
+type BadgeVariant = 'bullish' | 'bearish' | 'neutral' | 'long' | 'short' | 'x' | 'truth'
+
+interface BadgeProps {
+  variant: BadgeVariant
+  children?: React.ReactNode
+}
+
+const variantStyles: Record<BadgeVariant, string> = {
+  bullish: 'bg-[#0d2e1a] text-[#4ade80] border border-[#1a4a2a]',
+  bearish: 'bg-[#2e0d0d] text-[#ef4444] border border-[#4a1a1a]',
+  neutral: 'bg-[#141414] text-[#555555] border border-[#1e1e1e]',
+  long: 'bg-[#0d2e1a] text-[#4ade80] border border-[#1a4a2a]',
+  short: 'bg-[#2e0d0d] text-[#ef4444] border border-[#4a1a1a]',
+  x: 'bg-[#141414] text-white border border-[#222222]',
+  truth: 'bg-[#1a1a2e] text-[#818cf8] border border-[#2a2a4a]',
+}
+
+const variantLabels: Record<BadgeVariant, string> = {
+  bullish: 'Bullish',
+  bearish: 'Bearish',
+  neutral: 'Neutral',
+  long: 'Long',
+  short: 'Short',
+  x: 'X',
+  truth: 'Truth',
+}
+
+export default function Badge({ variant, children }: BadgeProps) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${variantStyles[variant]}`}
+    >
+      {children ?? variantLabels[variant]}
+    </span>
+  )
+}

components/ui/Card.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+interface CardProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export default function Card({ children, className = '' }: CardProps) {
+  return (
+    <div
+      className={`bg-[#0a0a0a] border border-[#141414] rounded-[10px] p-5 ${className}`}
+    >
+      {children}
+    </div>
+  )
+}

components/ui/Pill.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+interface PillProps {
+  active: boolean
+  onClick: () => void
+  children: React.ReactNode
+}
+
+export default function Pill({ active, onClick, children }: PillProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={
+        `rounded-full px-3 py-1 text-xs transition-colors ` +
+        (active
+          ? 'bg-[#141414] text-white border border-[#222222]'
+          : 'text-[#555555] border border-[#141414] hover:text-white')
+      }
+    >
+      {children}
+    </button>
+  )
+}