clarified paths and added lib/utils.ts folder

components/ui/button.tsx

@@ -3,4 +3,3 @@ 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

@@ -15,4 +15,3 @@ export function CardTitle({ children }: { children: React.ReactNode }) {
 export function CardContent({ children }: { children: React.ReactNode }) {
   return <div className="mt-2">{children}</div>
 }
-

components/ui/input.tsx

@@ -3,4 +3,3 @@ 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

@@ -1,4 +1,3 @@
 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

@@ -7,4 +7,3 @@ export function Select({ children, ...props }: React.SelectHTMLAttributes<HTMLSe
     </select>
   )
 }
-

components/ui/toast.tsx

@@ -26,4 +26,3 @@ export const ToastClose = ({ onClick }: { onClick: () => void }) => {
 export const ToastViewport = () => {
   return <div className="fixed bottom-0 right-0 w-80 flex flex-col gap-2 p-4" />
 }
-

components/ui/toaster.tsx

@@ -1,23 +1,17 @@
 "use client"
 
-import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast"
+import { Toast, ToastClose, ToastDescription, ToastTitle, ToastViewport } from "@/components/ui/toast"
 import { useToast } from "@/components/ui/use-toast"
 
 export function Toaster() {
-  const { toasts } = useToast()
+  const { message } = useToast()
 
-  return (
-    <ToastProvider>
-      {toasts.map(({ id, title, description, action, ...props }) => (
-        <Toast key={id} {...props} className="bg-white border-primary">
-          {title && <ToastTitle className="font-vollkorn">{title}</ToastTitle>}
-          {description && <ToastDescription className="font-open-sans">{description}</ToastDescription>}
-          {action}
-          <ToastClose />
-        </Toast>
-      ))}
+  return message ? (
+    <Toast>
+      <ToastTitle>Notification</ToastTitle>
+      <ToastDescription>{message}</ToastDescription>
+      <ToastClose onClick={() => console.log("Close Toast")} />
       <ToastViewport />
-    </ToastProvider>
-  )
+    </Toast>
+  ) : null
 }
-

components/ui/use-toast.tsx

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