Felipe Cardoso
6c358a3ca2
Standardize multiline formatting across components, tests, and API hooks for better consistency and clarity: - Adjusted function and object property indentation. - Updated tests and components to align with clean coding practices.
62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
/**
|
|
* EmptyState Component
|
|
*
|
|
* Displays a welcome message for new users with no projects.
|
|
* Provides call-to-action to create first project.
|
|
*
|
|
* @see Issue #53
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import { Rocket, Bot, Settings } from 'lucide-react';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Link } from '@/lib/i18n/routing';
|
|
|
|
export interface EmptyStateProps {
|
|
/** User's first name for personalization */
|
|
userName?: string;
|
|
/** Additional CSS classes */
|
|
className?: string;
|
|
}
|
|
|
|
export function EmptyState({ userName = 'there', className }: EmptyStateProps) {
|
|
return (
|
|
<Card className={className}>
|
|
<CardContent className="py-12 text-center">
|
|
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
|
|
<Rocket className="h-8 w-8 text-primary" />
|
|
</div>
|
|
|
|
<h2 className="text-2xl font-bold">Welcome to Syndarix, {userName}!</h2>
|
|
<p className="mx-auto mt-2 max-w-md text-muted-foreground">
|
|
Get started by creating your first project. Our AI agents will help you turn your ideas
|
|
into reality.
|
|
</p>
|
|
|
|
<Button size="lg" asChild className="mt-6">
|
|
<Link href="/projects/new">Create Your First Project</Link>
|
|
</Button>
|
|
|
|
<div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
|
|
<Link
|
|
href="/agents"
|
|
className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary"
|
|
>
|
|
<Bot className="h-4 w-4" />
|
|
Set up AI agent types
|
|
</Link>
|
|
<Link
|
|
href="/settings"
|
|
className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary"
|
|
>
|
|
<Settings className="h-4 w-4" />
|
|
Configure your account
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|