clarified paths and added lib/utils.ts folder

This commit is contained in:
Steve Dogiakos 2025-02-06 17:17:01 -07:00
parent 83fe7ac8d0
commit f0598ed85e
10 changed files with 24 additions and 36 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

3
lib/utils.ts Normal file
View File

@ -0,0 +1,3 @@
export function cn(...classes: (string | undefined | null | false)[]): string {
return classes.filter(Boolean).join(" ");
}

View File

@ -17,13 +17,11 @@
"isolatedModules": true, "isolatedModules": true,
"jsx": "preserve", "jsx": "preserve",
"baseUrl": ".", // Add this "baseUrl": ".", // Add this
"paths": { // Add this "paths": {
"@/*": [ "@/*": ["./*"],
"./*" "@/lib/*": ["lib/*"],
], // Ensures "@/components/..." resolves correctly "@/components/*": ["components/*"],
"@/components/*": [ "@/components/ui/*": ["components/ui/*"]
"components/*"
]
}, },
"plugins": [ "plugins": [
{ {