68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import NavbarEditor from '@/layouts/navbar/navbar-editor';
|
|
import NavbarPreview from '@/layouts/navbar/navbar-preview';
|
|
import { SharedData } from '@/types/global';
|
|
import { usePage } from '@inertiajs/react';
|
|
import { Edit, Eye, X } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import { SystemProps } from '../index';
|
|
|
|
const Navbar = () => {
|
|
const { props } = usePage<SystemProps & SharedData>();
|
|
const { navbar, translate } = props;
|
|
const { settings, button } = translate;
|
|
const [showEditor, setShowEditor] = useState(false);
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Eye className="h-5 w-5" />
|
|
{settings.live_navbar_preview}
|
|
</CardTitle>
|
|
<CardDescription className="hidden sm:block">
|
|
{settings.interactive_preview} {navbar.title} ({navbar.slug})
|
|
</CardDescription>
|
|
</div>
|
|
|
|
{showEditor ? (
|
|
<Button onClick={() => setShowEditor(false)} variant="outline">
|
|
<X className="mr-2 h-4 w-4" />
|
|
{button.close}
|
|
</Button>
|
|
) : (
|
|
<Button onClick={() => setShowEditor(true)} className="flex items-center gap-2">
|
|
<Edit className="h-4 w-4" />
|
|
{button.edit_navbar}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<Separator />
|
|
|
|
{showEditor ? (
|
|
<NavbarEditor navbar={navbar} />
|
|
) : (
|
|
<CardContent className="space-y-6 p-5">
|
|
<div>
|
|
<p className="text-muted-foreground mb-1 text-sm">{settings.before_login}</p>
|
|
<NavbarPreview auth={false} navbar={navbar} />
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-muted-foreground mb-1 text-sm">{settings.after_login}</p>
|
|
<NavbarPreview auth={true} navbar={navbar} />
|
|
</div>
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|