more updates to try and get this thing working. lots of UI stuff added

components/ui/button.tsx

@@ -0,0 +1,6 @@
+import { ButtonHTMLAttributes } from "react"
+
+export function Button(props: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button {...props} className="px-4 py-2 bg-primary text-white rounded-md hover:bg-secondary transition-colors" />
+}
+

components/ui/card.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+export function Card({ children, className }: { children: React.ReactNode; className?: string }) {
+  return <div className={`border border-gray-300 rounded-lg shadow-md p-4 ${className}`}>{children}</div>
+}
+
+export function CardHeader({ children }: { children: React.ReactNode }) {
+  return <div className="border-b border-gray-200 pb-2 mb-4 font-semibold">{children}</div>
+}
+
+export function CardTitle({ children }: { children: React.ReactNode }) {
+  return <h2 className="text-xl font-bold">{children}</h2>
+}
+
+export function CardContent({ children }: { children: React.ReactNode }) {
+  return <div className="mt-2">{children}</div>
+}
+

components/ui/input.tsx

@@ -0,0 +1,6 @@
+import { InputHTMLAttributes } from "react"
+
+export function Input(props: InputHTMLAttributes<HTMLInputElement>) {
+  return <input {...props} className="border border-gray-300 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500" />
+}
+

components/ui/label.tsx

@@ -0,0 +1,4 @@
+export function Label({ htmlFor, children }: { htmlFor: string; children: React.ReactNode }) {
+  return <label htmlFor={htmlFor} className="block font-medium text-mdc-dark">{children}</label>
+}
+

components/ui/select.tsx

@@ -0,0 +1,10 @@
+import * as React from "react"
+
+export function Select({ children, ...props }: React.SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select {...props} className="border border-gray-300 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500">
+      {children}
+    </select>
+  )
+}
+

components/ui/toast.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export const Toast = ({ children, className }: { children: React.ReactNode; className?: string }) => {
+  return <div className={cn("fixed bottom-5 right-5 bg-gray-800 text-white p-3 rounded-lg shadow-lg", className)}>{children}</div>
+}
+
+export const ToastTitle = ({ children }: { children: React.ReactNode }) => {
+  return <strong className="block font-bold">{children}</strong>
+}
+
+export const ToastDescription = ({ children }: { children: React.ReactNode }) => {
+  return <p className="text-sm">{children}</p>
+}
+
+export const ToastClose = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <button onClick={onClick} className="absolute top-2 right-2 text-gray-400 hover:text-gray-200">
+      ✖
+    </button>
+  )
+}
+
+export const ToastViewport = () => {
+  return <div className="fixed bottom-0 right-0 w-80 flex flex-col gap-2 p-4" />
+}
+

components/ui/use-toast.tsx

@@ -0,0 +1,14 @@
+import { useState } from "react";
+
+export function useToast() {
+  const [message, setMessage] = useState<string | null>(null);
+
+  const toast = ({ title, description, variant }: { title: string; description: string; variant?: "default" | "destructive" }) => {
+    console.log(`${variant === "destructive" ? "[ERROR]" : "[INFO]"} ${title}: ${description}`);
+    setMessage(`${title}: ${description}`);
+    setTimeout(() => setMessage(null), 3000);
+  };
+
+  return { toast, message };
+}
+