soconnor/hristudio
1
0
Fork 0
mirror of https://github.com/soconnor0919/hristudio.git synced 2025-12-11 22:54:45 -05:00
Code Issues Packages Projects Releases Wiki Activity

Clean codebase- start from scratch

Browse Source
This commit is contained in:
Sean O'Connor
2024-11-19 22:14:54 -05:00
parent 9d9aa52285
commit b4a05e0bcd
97 changed files with 6376 additions and 3624 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/ThemeProvider.tsx
View File

@@ -1,35 +0,0 @@
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"
import { useEffect, useState } from "react"
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
const [mounted, setMounted] = useState(false)
useEffect(() => {
setMounted(true)
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
const handleChange = () => {
document.documentElement.classList.toggle('dark', mediaQuery.matches)
}
mediaQuery.addListener(handleChange)
handleChange() // Initial check
return () => mediaQuery.removeListener(handleChange)
}, [])
if (!mounted) {
return null
}
return (
<NextThemesProvider
attribute="class"
defaultTheme="system"
enableSystem
{...props}
>
{children}
</NextThemesProvider>
)
}

67
src/components/ThemeToggle.tsx
View File

@@ -1,67 +0,0 @@
"use client"
import { useTheme } from "next-themes"
import { Button } from "~/components/ui/button"
import { MoonIcon, SunIcon, LaptopIcon } from "lucide-react"
import { useEffect, useState } from "react"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "~/components/ui/popover"
export function ThemeToggle() {
const { theme, setTheme } = useTheme()
const [mounted, setMounted] = useState(false)
useEffect(() => {
setMounted(true)
}, [])
if (!mounted) {
return null
}
return (
<Popover>
<PopoverTrigger asChild>
<Button variant="ghost" size="icon">
<SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-2">
<div className="flex flex-col space-y-1">
<Button
variant="ghost"
size="sm"
onClick={() => setTheme('light')}
className={theme === 'light' ? 'bg-accent' : ''}
>
<SunIcon className="h-4 w-4 mr-2" />
Light
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => setTheme('dark')}
className={theme === 'dark' ? 'bg-accent' : ''}
>
<MoonIcon className="h-4 w-4 mr-2" />
Dark
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => setTheme('system')}
className={theme === 'system' ? 'bg-accent' : ''}
>
<LaptopIcon className="h-4 w-4 mr-2" />
System
</Button>
</div>
</PopoverContent>
</Popover>
)
}

63
src/components/forms/FormCard.tsx
View File

@@ -1,63 +0,0 @@
import Image from 'next/image';
import { Card, CardContent, CardFooter } from "~/components/ui/card";
import { Badge } from "~/components/ui/badge";
import { Trash2 } from "lucide-react";
import { Button } from "~/components/ui/button";
interface FormCardProps {
form: {
id: number;
title: string;
location: string;
studyId: number;
studyTitle: string;
participantId: number;
participantName: string;
previewLocation: string;
};
onDelete: (formId: number) => void;
}
export function FormCard({ form, onDelete }: FormCardProps) {
const handleCardClick = () => {
window.open(form.location, '_blank');
};
return (
<Card className="overflow-hidden cursor-pointer" onClick={handleCardClick} style={{ backgroundColor: 'var(--primary-card-background)' }}>
<CardContent className="p-0 h-40 relative">
<Image
src={form.previewLocation}
alt={form.title}
fill
className="object-cover object-top"
onError={(e) => {
e.currentTarget.src = '/placeholder-image.png';
console.error('Error loading image:', form.previewLocation);
}}
/>
</CardContent>
<CardFooter className="flex flex-col items-start p-4" style={{ backgroundColor: 'var(--secondary-card-background)' }}>
<div className="flex items-center justify-between w-full">
<h3 className="font-semibold mb-2">{form.title}</h3>
<Button
variant="ghost"
size="sm"
className="text-destructive"
onClick={(e) => {
e.stopPropagation();
onDelete(form.id);
}}
>
<Trash2 className="h-4 w-4" />
Delete
</Button>
</div>
<div className="flex flex-wrap gap-2 mb-2">
<Badge variant="secondary">{form.studyTitle}</Badge>
<Badge variant="outline">{form.participantName}</Badge>
</div>
</CardFooter>
</Card>
);
}

1
src/components/forms/Forms.tsx
View File

@@ -1 +0,0 @@

74
src/components/forms/FormsGrid.tsx
View File

@@ -1,74 +0,0 @@
"use client";
import { useState, useEffect } from "react";
import { FormCard } from "~/components/forms/FormCard";
import { useToast } from "~/hooks/use-toast";
interface Form {
id: number;
title: string;
location: string;
studyId: number;
studyTitle: string;
participantId: number;
participantName: string;
previewLocation: string;
}
export function FormsGrid() {
const [forms, setForms] = useState<Form[]>([]);
const { toast } = useToast();
useEffect(() => {
fetchForms();
}, []);
const fetchForms = async () => {
try {
const response = await fetch("/api/forms");
if (!response.ok) {
throw new Error("Failed to fetch forms");
}
const data = await response.json();
setForms(data);
} catch (error) {
console.error("Error fetching forms:", error);
toast({
title: "Error",
description: "Failed to load forms. Please try again.",
variant: "destructive",
});
}
};
const handleDelete = async (formId: number) => {
try {
const response = await fetch(`/api/forms/${formId}`, {
method: "DELETE",
});
if (!response.ok) {
throw new Error("Failed to delete form");
}
setForms(forms.filter((form) => form.id !== formId));
toast({
title: "Success",
description: "Form deleted successfully",
});
} catch (error) {
console.error("Error deleting form:", error);
toast({
title: "Error",
description: "Failed to delete form. Please try again.",
variant: "destructive",
});
}
};
return (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
{forms.map((form) => (
<FormCard key={form.id} form={form} onDelete={handleDelete} />
))}
</div>
);
}

113
src/components/forms/UploadFormButton.tsx
View File

@@ -1,113 +0,0 @@
"use client";
import { useState } from "react";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
import { useToast } from "~/hooks/use-toast";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "~/components/ui/dialog";
import { useStudyContext } from "~/context/StudyContext";
export function UploadFormButton() {
const [isOpen, setIsOpen] = useState(false);
const [file, setFile] = useState<File | null>(null);
const [title, setTitle] = useState("");
const [participantId, setParticipantId] = useState("");
const { toast } = useToast();
const { selectedStudy } = useStudyContext();
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!file || !title || !participantId || !selectedStudy) {
toast({
title: "Error",
description: "Please fill in all fields and select a file.",
variant: "destructive",
});
return;
}
const formData = new FormData();
formData.append("file", file);
formData.append("title", title);
formData.append("studyId", selectedStudy.id.toString());
formData.append("participantId", participantId);
try {
const response = await fetch("/api/forms", {
method: "POST",
body: formData,
});
if (!response.ok) {
throw new Error("Failed to upload form");
}
toast({
title: "Success",
description: "Form uploaded successfully",
});
setIsOpen(false);
setFile(null);
setTitle("");
setParticipantId("");
} catch (error) {
console.error("Error uploading form:", error);
toast({
title: "Error",
description: "Failed to upload form. Please try again.",
variant: "destructive",
});
}
};
return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button>Upload Form</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Upload New Form</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<Label htmlFor="title">Title</Label>
<Input
id="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
required
/>
</div>
<div>
<Label htmlFor="participantId">Participant ID</Label>
<Input
id="participantId"
value={participantId}
onChange={(e) => setParticipantId(e.target.value)}
required
/>
</div>
<div>
<Label htmlFor="file">File</Label>
<Input
id="file"
type="file"
accept=".pdf"
onChange={(e) => setFile(e.target.files?.[0] || null)}
required
/>
</div>
<Button type="submit">Upload</Button>
</form>
</DialogContent>
</Dialog>
);
}

25
src/components/layout.tsx
View File

@@ -1,25 +0,0 @@
import { PropsWithChildren } from "react";
import { Sidebar } from "~/components/sidebar";
import { StudyHeader } from "~/components/study/StudyHeader";
import { Toaster } from "~/components/ui/toaster";
interface LayoutProps {
pageTitle: string;
}
const Layout = ({ children, pageTitle }: PropsWithChildren<LayoutProps>) => {
return (
<div className="flex h-screen">
<Sidebar />
<main className="flex-1 overflow-y-auto bg-gradient-to-b from-[hsl(var(--gradient-start))] to-[hsl(var(--gradient-end))]">
<div className="container mx-auto space-y-4 p-4 pt-16 lg:pt-4">
<StudyHeader pageTitle={pageTitle} />
{children}
<Toaster />
</div>
</main>
</div>
);
};
export default Layout;

52
src/components/participant/CreateParticipantDialog.tsx
View File

@@ -1,52 +0,0 @@
import React, { useState } from 'react';
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "~/components/ui/dialog";
import { Label } from "~/components/ui/label";
import { PlusCircle } from 'lucide-react';
interface CreateParticipantDialogProps {
onCreateParticipant: (name: string) => void;
}
export function CreateParticipantDialog({ onCreateParticipant }: CreateParticipantDialogProps) {
const [newParticipant, setNewParticipant] = useState({ name: '' });
const [isOpen, setIsOpen] = useState(false);
const handleCreate = () => {
if (newParticipant.name) {
onCreateParticipant(newParticipant.name);
setNewParticipant({ name: '' });
setIsOpen(false);
}
};
return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button variant="outline" size="icon">
<PlusCircle className="h-4 w-4" />
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Add New Participant</DialogTitle>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="name" className="text-right">
Name
</Label>
<Input
id="name"
value={newParticipant.name}
onChange={(e) => setNewParticipant({ name: e.target.value })}
className="col-span-3"
/>
</div>
</div>
<Button onClick={handleCreate}>Add Participant</Button>
</DialogContent>
</Dialog>
);
}

30
src/components/participant/ParticipantCard.tsx
View File

@@ -1,30 +0,0 @@
import { Card, CardContent, CardFooter } from "~/components/ui/card";
import { Button } from "~/components/ui/button";
import { Trash2 } from "lucide-react";
import { Participant } from "../../types/Participant";
interface ParticipantCardProps {
participant: Participant;
onDelete: (participantId: number) => void;
}
export function ParticipantCard({ participant, onDelete }: ParticipantCardProps) {
return (
<Card className="overflow-hidden">
<CardContent className="p-4">
<h3 className="font-semibold mb-2">{participant.name}</h3>
</CardContent>
<CardFooter className="flex justify-end p-4">
<Button
variant="ghost"
size="sm"
className="text-destructive"
onClick={() => onDelete(participant.id)}
>
<Trash2 className="h-4 w-4 mr-2" />
Delete
</Button>
</CardFooter>
</Card>
);
}

131
src/components/participant/Participants.tsx
View File

@@ -1,131 +0,0 @@
"use client";
import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { Button } from "~/components/ui/button";
import { useStudyContext } from '../../context/StudyContext';
import { Participant } from '../../types/Participant';
import { CreateParticipantDialog } from './CreateParticipantDialog';
import { useToast } from '~/hooks/use-toast';
import { ParticipantCard } from './ParticipantCard';
import { Avatar, AvatarFallback } from "~/components/ui/avatar";
interface ParticipantWithTrial {
id: number;
name: string;
latestTrialTimestamp: string | null;
createdAt: string;
}
export function Participants() {
const [participants, setParticipants] = useState<ParticipantWithTrial[]>([]);
const { selectedStudy } = useStudyContext();
const { toast } = useToast();
useEffect(() => {
if (selectedStudy) {
fetchParticipants();
}
}, [selectedStudy]);
const fetchParticipants = async () => {
if (!selectedStudy) return;
try {
const response = await fetch(`/api/participants?studyId=${selectedStudy.id}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const text = await response.text();
try {
const data = JSON.parse(text);
setParticipants(data);
} catch (e) {
console.error('Failed to parse JSON:', text);
throw new Error('Invalid JSON in response');
}
} catch (error) {
console.error('Error fetching participants:', error);
// Handle the error appropriately, e.g., show a toast notification
}
};
const createParticipant = async (name: string) => {
if (!selectedStudy) return;
const response = await fetch('/api/participants', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, studyId: selectedStudy.id }),
});
const createdParticipant = await response.json();
setParticipants([...participants, createdParticipant]);
};
const deleteParticipant = async (id: number) => {
if (!selectedStudy) return;
try {
const response = await fetch(`/api/participants/${id}`, {
method: 'DELETE',
});
if (!response.ok) {
throw new Error('Failed to delete participant');
}
setParticipants(participants.filter(p => p.id !== id));
toast({
title: "Success",
description: "Participant deleted successfully",
});
} catch (error) {
toast({
title: "Error",
description: error instanceof Error ? error.message : 'Failed to delete participant',
variant: "destructive",
});
}
};
if (!selectedStudy) {
return <div>Please select a study to manage participants.</div>;
}
return (
<Card className="card-level-1">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-2xl font-bold">Participants for {selectedStudy.title}</CardTitle>
<CreateParticipantDialog onCreateParticipant={createParticipant} />
</CardHeader>
<CardContent>
{participants.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{participants.map(participant => (
<Card key={participant.id} className="card-level-2 p-3 flex items-center w-full">
<Avatar className="mr-4">
<AvatarFallback>{participant.name.split(' ').map(n => n[0]).join('')}</AvatarFallback>
</Avatar>
<div className="flex-1">
<h3 className="font-semibold">{participant.name}</h3>
<p className="text-sm text-muted-foreground">
{participant.latestTrialTimestamp
? `Last trial: ${new Date(participant.latestTrialTimestamp).toLocaleString()}`
: 'No trials yet'}
</p>
</div>
<Button
variant="ghost"
size="sm"
className="text-destructive"
onClick={() => deleteParticipant(participant.id)}
>
Delete
</Button>
</Card>
))}
</div>
) : (
<p>No participants added yet.</p>
)}
</CardContent>
</Card>
);
}

25
src/components/sidebar.tsx
View File

@@ -1,9 +1,9 @@
"use client"
'use client';
import { UserButton, useUser } from "@clerk/nextjs"
import {
BarChartIcon,
UsersRoundIcon,
UsersRoundIcon,
LandPlotIcon,
BotIcon,
FolderIcon,
@@ -16,18 +16,17 @@ import Link from "next/link"
import { usePathname } from "next/navigation"
import { useState } from "react"
import { Button } from "~/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "~/components/ui/sheet"
import { Sheet, SheetContent, SheetTrigger, SheetTitle } from "~/components/ui/sheet"
import { cn } from "~/lib/utils"
import { ThemeToggle } from "~/components/ThemeToggle"
const navItems = [
{ name: "Dashboard", href: "/dash", icon: LayoutDashboard },
{ name: "Studies", href: "/studies", icon: FolderIcon },
{ name: "Participants", href: "/participants", icon: UsersRoundIcon },
{ name: "Trials", href: "/trials", icon: LandPlotIcon },
{ name: "Forms", href: "/forms", icon: FileTextIcon },
{ name: "Data Analysis", href: "/analysis", icon: BarChartIcon },
{ name: "Settings", href: "/settings", icon: Settings },
{ name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
{ name: "Studies", href: "/dashboard/studies", icon: FolderIcon },
{ name: "Participants", href: "/dashboard/participants", icon: UsersRoundIcon },
{ name: "Trials", href: "/dashboard/trials", icon: LandPlotIcon },
{ name: "Forms", href: "/dashboard/forms", icon: FileTextIcon },
{ name: "Data Analysis", href: "/dashboard/analysis", icon: BarChartIcon },
{ name: "Settings", href: "/dashboard/settings", icon: Settings },
];
export function Sidebar() {
@@ -36,7 +35,7 @@ export function Sidebar() {
const { user } = useUser()
const HRIStudioLogo = () => (
<Link href="/dash" className="flex items-center font-sans text-xl text-[hsl(var(--sidebar-foreground))]">
<Link href="/dashboard" className="flex items-center font-sans text-xl text-[hsl(var(--sidebar-foreground))]">
<BotIcon className="h-6 w-6 mr-1 text-[hsl(var(--sidebar-muted))]" />
<span className="font-extrabold">HRI</span>
<span className="font-normal">Studio</span>
@@ -78,7 +77,6 @@ export function Sidebar() {
<p className="text-xs text-[hsl(var(--sidebar-muted))]">{user?.primaryEmailAddress?.emailAddress ?? 'user@example.com'}</p>
</div>
</div>
<ThemeToggle />
</div>
</div>
</div>
@@ -96,6 +94,7 @@ export function Sidebar() {
</Button>
</SheetTrigger>
<SheetContent side="top" className="w-full">
<SheetTitle className="sr-only">Navigation Menu</SheetTitle>
<SidebarContent />
</SheetContent>
</Sheet>

90
src/components/study/CreateStudyDialog.tsx
View File

@@ -1,90 +0,0 @@
import { useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "~/components/ui/dialog";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Textarea } from "~/components/ui/textarea";
import { Label } from "~/components/ui/label";
import { PlusCircle } from 'lucide-react';
import { Study } from '../../types/Study';
interface CreateStudyDialogProps {
onCreateStudy: (study: Omit<Study, 'id'>) => void;
}
export function CreateStudyDialog({ onCreateStudy }: CreateStudyDialogProps) {
const [isOpen, setIsOpen] = useState(false);
const [newStudy, setNewStudy] = useState({ title: '', description: '' });
const [touched, setTouched] = useState({ title: false, description: false });
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setNewStudy({ ...newStudy, [name]: value });
setTouched({ ...touched, [name]: true });
};
const isFieldInvalid = (field: 'title' | 'description') => {
return field === 'title' ? (touched.title && !newStudy.title) : false;
};
const handleCreateStudy = () => {
setTouched({ title: true, description: true });
if (!newStudy.title) {
return;
}
onCreateStudy({
title: newStudy.title,
description: newStudy.description || undefined
});
setNewStudy({ title: '', description: '' });
setTouched({ title: false, description: false });
setIsOpen(false);
};
return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button variant="outline" size="icon">
<PlusCircle className="h-4 w-4" />
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Create New Study</DialogTitle>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="title" className="text-right">
Title
</Label>
<Input
id="title"
name="title"
className={`col-span-3 ${isFieldInvalid('title') ? 'border-red-500' : ''}`}
value={newStudy.title}
onChange={handleInputChange}
/>
</div>
{isFieldInvalid('title') && (
<p className="text-red-500 text-sm col-span-4">Title is required</p>
)}
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="description" className="text-right">
Description
</Label>
<Textarea
id="description"
name="description"
className="col-span-3"
value={newStudy.description}
onChange={handleInputChange}
/>
</div>
</div>
<Button onClick={handleCreateStudy}>Create Study</Button>
</DialogContent>
</Dialog>
);
}

28
src/components/study/Studies.tsx
View File

@@ -1,28 +0,0 @@
"use client";
import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { useStudies } from '~/hooks/useStudies';
import { Button } from "~/components/ui/button";
export function Studies() {
const { studies, deleteStudy } = useStudies();
return (
<div className="space-y-4">
{studies.map((study) => (
<Card key={study.id}>
<CardHeader>
<CardTitle>{study.title}</CardTitle>
</CardHeader>
<CardContent>
<p>{study.description}</p>
<div className="flex space-x-2 mt-2">
<Button variant="destructive" onClick={() => deleteStudy(study.id)}>Delete</Button>
</div>
</CardContent>
</Card>
))}
</div>
);
}

79
src/components/study/StudyHeader.tsx
View File

@@ -1,79 +0,0 @@
"use client";
import React, { useEffect } from 'react';
import { Card, CardContent } from "~/components/ui/card";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
import { useStudyContext } from '~/context/StudyContext';
import { StudySelector } from './StudySelector';
import { CreateStudyDialog } from '~/components/study/CreateStudyDialog';
import { Study } from '~/types/Study';
interface StudyHeaderProps {
pageTitle: string;
}
export const StudyHeader: React.FC<StudyHeaderProps> = ({ pageTitle }) => {
const { studies, selectedStudy, setSelectedStudy, validateAndSetSelectedStudy, fetchAndSetStudies } = useStudyContext();
useEffect(() => {
const savedStudyId = localStorage.getItem('selectedStudyId');
if (savedStudyId) {
validateAndSetSelectedStudy(parseInt(savedStudyId, 10));
}
}, [validateAndSetSelectedStudy]);
const handleStudyChange = (studyId: string) => {
const study = studies.find(s => s.id.toString() === studyId);
if (study) {
setSelectedStudy(study);
localStorage.setItem('selectedStudyId', studyId);
}
};
const createStudy = async (newStudy: Omit<Study, "id">) => {
const response = await fetch('/api/studies', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(newStudy),
});
if (!response.ok) {
throw new Error('Failed to create study');
}
const createdStudy = await response.json();
await fetchAndSetStudies();
return createdStudy;
};
const handleCreateStudy = async (newStudy: Omit<Study, "id">) => {
const createdStudy = await createStudy(newStudy);
setSelectedStudy(createdStudy);
localStorage.setItem('selectedStudyId', createdStudy.id.toString());
};
return (
<Card className="mt-2 lg:mt-0">
<CardContent className="flex justify-between items-center p-4">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<h2 className="text-2xl font-bold truncate max-w-[200px]">
{pageTitle}
</h2>
</TooltipTrigger>
<TooltipContent>
<p>{selectedStudy ? selectedStudy.title : 'No study selected'}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<div className="flex items-center space-x-2">
<StudySelector
studies={studies}
selectedStudy={selectedStudy}
onStudyChange={handleStudyChange}
/>
<CreateStudyDialog onCreateStudy={(study: Omit<Study, "id">) => handleCreateStudy(study as Study)} />
</div>
</CardContent>
</Card>
);
};

31
src/components/study/StudySelector.tsx
View File

@@ -1,31 +0,0 @@
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
import { Study } from '../../types/Study';
interface StudySelectorProps {
studies: Study[];
selectedStudy: Study | null;
onStudyChange: (studyId: string) => void;
}
export function StudySelector({ studies, selectedStudy, onStudyChange }: StudySelectorProps) {
return (
<Select onValueChange={onStudyChange} value={selectedStudy?.id?.toString() || ""}>
<SelectTrigger className="w-[200px]">
<SelectValue placeholder="Select a study" />
</SelectTrigger>
<SelectContent>
{studies.length > 0 ? (
studies.map((study) => (
<SelectItem key={study.id} value={study.id.toString()}>
{study.title}
</SelectItem>
))
) : (
<SelectItem value="no-studies" disabled className="text-gray-400 italic">
No studies available
</SelectItem>
)}
</SelectContent>
</Select>
);
}

58
src/components/trial/CreateTrialDialog.tsx
View File

@@ -1,58 +0,0 @@
import React, { useState } from 'react';
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "~/components/ui/dialog";
import { Label } from "~/components/ui/label";
interface CreateTrialDialogProps {
onCreateTrial: (title: string, participantIds: number[]) => void;
}
export function CreateTrialDialog({ onCreateTrial }: CreateTrialDialogProps) {
const [title, setTitle] = useState('');
const [participantIds, setParticipantIds] = useState<string>('');
const handleCreate = () => {
const ids = participantIds.split(',').map(id => parseInt(id.trim())).filter(id => !isNaN(id));
if (title && ids.length > 0) {
onCreateTrial(title, ids);
setTitle('');
setParticipantIds('');
}
};
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Add Trial</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Add New Trial</DialogTitle>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="title" className="text-right">Title</Label>
<Input
id="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
className="col-span-3"
/>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="participants" className="text-right">Participant IDs (comma-separated)</Label>
<Input
id="participants"
value={participantIds}
onChange={(e) => setParticipantIds(e.target.value)}
className="col-span-3"
placeholder="e.g. 1, 2, 3"
/>
</div>
</div>
<Button onClick={handleCreate}>Add Trial</Button>
</DialogContent>
</Dialog>
);
}

111
src/components/trial/Trials.tsx
View File

@@ -1,111 +0,0 @@
"use client";
import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { Button } from "~/components/ui/button";
import { useToast } from '~/hooks/use-toast';
import { CreateTrialDialog } from '~/components/trial/CreateTrialDialog';
interface Trial {
id: number;
title: string;
participantIds: number[];
createdAt: string;
}
export function Trials() {
const [trials, setTrials] = useState<Trial[]>([]);
const { toast } = useToast();
useEffect(() => {
fetchTrials();
}, []);
const fetchTrials = async () => {
const response = await fetch('/api/trials');
if (!response.ok) {
const errorText = await response.text();
console.error('Error fetching trials:', response.status, errorText);
return;
}
const data = await response.json();
if (!data || data.length === 0) {
console.warn('No trials found');
setTrials([]); // Set to an empty array if no trials are found
return;
}
setTrials(data);
};
const createTrial = async (title: string, participantIds: number[]) => {
const response = await fetch('/api/trials', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title, participantIds }),
});
const newTrial = await response.json();
setTrials([...trials, newTrial]);
toast({
title: "Success",
description: "Trial created successfully",
});
};
const deleteTrial = async (id: number) => {
const response = await fetch(`/api/trials/${id}`, {
method: 'DELETE',
});
if (response.ok) {
setTrials(trials.filter(trial => trial.id !== id));
toast({
title: "Success",
description: "Trial deleted successfully",
});
} else {
toast({
title: "Error",
description: "Failed to delete trial",
variant: "destructive",
});
}
};
return (
<Card className="card-level-1">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-2xl font-bold">Trials</CardTitle>
<CreateTrialDialog onCreateTrial={createTrial} />
</CardHeader>
<CardContent>
{trials.length > 0 ? (
<div className="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{trials.map(trial => (
<Card key={trial.id} className="card-level-2 p-3 flex items-center justify-between">
<div>
<h3 className="font-semibold">{trial.title}</h3>
<p className="text-sm text-gray-500">
Participants: {trial.participantIds ? trial.participantIds.join(', ') : 'None'}
</p>
</div>
<Button
variant="ghost"
size="sm"
className="text-destructive"
onClick={() => deleteTrial(trial.id)}
>
Delete
</Button>
</Card>
))}
</div>
) : (
<p>No trials added yet.</p>
)}
</CardContent>
</Card>
);
}

50
src/components/ui/avatar.tsx
View File

@@ -1,50 +0,0 @@
"use client"
import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"
import { cn } from "~/lib/utils"
const Avatar = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Root
ref={ref}
className={cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
className
)}
{...props}
/>
))
Avatar.displayName = AvatarPrimitive.Root.displayName
const AvatarImage = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Image>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Image
ref={ref}
className={cn("aspect-square h-full w-full", className)}
{...props}
/>
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName
const AvatarFallback = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Fallback>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Fallback
ref={ref}
className={cn(
"flex h-full w-full items-center justify-center rounded-full bg-muted",
className
)}
{...props}
/>
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
export { Avatar, AvatarImage, AvatarFallback }

36
src/components/ui/badge.tsx
View File

@@ -1,36 +0,0 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "~/lib/utils"
const badgeVariants = cva(
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)
export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}
function Badge({ className, variant, ...props }: BadgeProps) {
return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
)
}
export { Badge, badgeVariants }

2
src/components/ui/button.tsx
View File

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "~/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{
variants: {
variant: {

2
src/components/ui/card.tsx
View File

@@ -35,7 +35,7 @@ const CardTitle = React.forwardRef<
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn("font-semibold leading-none tracking-tight text-2xl", className)}
className={cn("font-semibold leading-none tracking-tight", className)}
{...props}
/>
))

122
src/components/ui/dialog.tsx
View File

@@ -1,122 +0,0 @@
"use client"
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { Cross2Icon } from "@radix-ui/react-icons"
import { cn } from "~/lib/utils"
const Dialog = DialogPrimitive.Root
const DialogTrigger = DialogPrimitive.Trigger
const DialogPortal = DialogPrimitive.Portal
const DialogClose = DialogPrimitive.Close
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
/>
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<Cross2Icon className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName
const DialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
)}
{...props}
/>
)
DialogHeader.displayName = "DialogHeader"
const DialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
)
DialogFooter.displayName = "DialogFooter"
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
DialogTitle.displayName = DialogPrimitive.Title.displayName
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
DialogDescription.displayName = DialogPrimitive.Description.displayName
export {
Dialog,
DialogPortal,
DialogOverlay,
DialogTrigger,
DialogClose,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
}

8
src/components/ui/input.tsx
View File

@@ -2,14 +2,16 @@ import * as React from "react"
import { cn } from "~/lib/utils"
// Use React.InputHTMLAttributes<HTMLInputElement> directly in the component
const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}

33
src/components/ui/popover.tsx
View File

@@ -1,33 +0,0 @@
"use client"
import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"
import { cn } from "~/lib/utils"
const Popover = PopoverPrimitive.Root
const PopoverTrigger = PopoverPrimitive.Trigger
const PopoverAnchor = PopoverPrimitive.Anchor
const PopoverContent = React.forwardRef<
React.ElementRef<typeof PopoverPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
ref={ref}
align={align}
sideOffset={sideOffset}
className={cn(
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}
/>
</PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

31
src/components/ui/separator.tsx
View File

@@ -1,31 +0,0 @@
"use client"
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "~/lib/utils"
const Separator = React.forwardRef<
React.ElementRef<typeof SeparatorPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
(
{ className, orientation = "horizontal", decorative = true, ...props },
ref
) => (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)}
{...props}
/>
)
)
Separator.displayName = SeparatorPrimitive.Root.displayName
export { Separator }

129
src/components/ui/toast.tsx
View File

@@ -1,129 +0,0 @@
"use client"
import * as React from "react"
import { Cross2Icon } from "@radix-ui/react-icons"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "~/lib/utils"
const ToastProvider = ToastPrimitives.Provider
const ToastViewport = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Viewport>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Viewport
ref={ref}
className={cn(
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
className
)}
{...props}
/>
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
const toastVariants = cva(
"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
{
variants: {
variant: {
default: "border bg-background text-foreground",
destructive:
"destructive group border-destructive bg-destructive text-destructive-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)
const Toast = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
return (
<ToastPrimitives.Root
ref={ref}
className={cn(toastVariants({ variant }), className)}
{...props}
/>
)
})
Toast.displayName = ToastPrimitives.Root.displayName
const ToastAction = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Action>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Action
ref={ref}
className={cn(
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
className
)}
{...props}
/>
))
ToastAction.displayName = ToastPrimitives.Action.displayName
const ToastClose = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Close>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Close
ref={ref}
className={cn(
"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
className
)}
toast-close=""
{...props}
>
<Cross2Icon className="h-4 w-4" />
</ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName
const ToastTitle = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Title>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Title
ref={ref}
className={cn("text-sm font-semibold [&+div]:text-xs", className)}
{...props}
/>
))
ToastTitle.displayName = ToastPrimitives.Title.displayName
const ToastDescription = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Description>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Description
ref={ref}
className={cn("text-sm opacity-90", className)}
{...props}
/>
))
ToastDescription.displayName = ToastPrimitives.Description.displayName
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
type ToastActionElement = React.ReactElement<typeof ToastAction>
export {
type ToastProps,
type ToastActionElement,
ToastProvider,
ToastViewport,
Toast,
ToastTitle,
ToastDescription,
ToastClose,
ToastAction,
}

35
src/components/ui/toaster.tsx
View File

@@ -1,35 +0,0 @@
"use client"
import { useToast } from "~/hooks/use-toast"
import {
Toast,
ToastClose,
ToastDescription,
ToastProvider,
ToastTitle,
ToastViewport,
} from "~/components/ui/toast"
export function Toaster() {
const { toasts } = useToast()
return (
<ToastProvider>
{toasts.map(function ({ id, title, description, action, ...props }) {
return (
<Toast key={id} {...props}>
<div className="grid gap-1">
{title && <ToastTitle>{title}</ToastTitle>}
{description && (
<ToastDescription>{description}</ToastDescription>
)}
</div>
{action}
<ToastClose />
</Toast>
)
})}
<ToastViewport />
</ToastProvider>
)
}

30
src/components/ui/tooltip.tsx
View File

@@ -1,30 +0,0 @@
"use client"
import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
import { cn } from "~/lib/utils"
const TooltipProvider = TooltipPrimitive.Provider
const Tooltip = TooltipPrimitive.Root
const TooltipTrigger = TooltipPrimitive.Trigger
const TooltipContent = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<TooltipPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}
/>
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }