Files
vito/resources/js/pages/site-settings/index.tsx
Saeed Vaziry c3f69f3247 #591 - sites
2025-06-04 08:08:20 +02:00

168 lines
6.7 KiB
TypeScript

import { Head, usePage } from '@inertiajs/react';
import { Server } from '@/types/server';
import Container from '@/components/container';
import HeaderContainer from '@/components/header-container';
import Heading from '@/components/heading';
import { Button } from '@/components/ui/button';
import ServerLayout from '@/layouts/server/layout';
import { BookOpenIcon } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import DateTime from '@/components/date-time';
import React from 'react';
import { Site } from '@/types/site';
import { Badge } from '@/components/ui/badge';
import ChangeBranch from '@/pages/site-settings/components/branch';
import { SourceControl } from '@/types/source-control';
import CopyableBadge from '@/components/copyable-badge';
import ChangePHPVersion from '@/pages/site-settings/components/php-version';
import DeleteSite from '@/pages/site-settings/components/delete-site';
import VHost from '@/pages/site-settings/components/vhost';
import ChangeSourceControl from '@/pages/site-settings/components/source-control';
export default function Databases() {
const page = usePage<{
server: Server;
site: Site;
sourceControl?: SourceControl;
}>();
return (
<ServerLayout>
<Head title={`Settings - ${page.props.site.domain}`} />
<Container className="max-w-5xl">
<HeaderContainer>
<Heading title="Settings" description="Here you can manage your server's settings" />
<div className="flex items-center gap-2">
<a href="https://vitodeploy.com/docs/sites/settings" target="_blank">
<Button variant="outline">
<BookOpenIcon />
<span className="hidden lg:block">Docs</span>
</Button>
</a>
</div>
</HeaderContainer>
<Card>
<CardHeader className="flex-row items-center justify-between gap-2">
<div className="space-y-2">
<CardTitle>Site details</CardTitle>
<CardDescription>Update site details</CardDescription>
</div>
</CardHeader>
<CardContent>
<div className="flex items-center justify-between p-4">
<span>ID</span>
<span className="text-muted-foreground">{page.props.site.id}</span>
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Domain</span>
<a href={page.props.site.url} target="_blank" className="text-muted-foreground hover:underline">
{page.props.site.domain}
</a>
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Type</span>
<span className="text-muted-foreground">{page.props.site.type}</span>
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Source control</span>
{page.props.site.source_control_id ? (
<ChangeSourceControl site={page.props.site}>
<Button variant="outline" className="h-6">
{page.props.sourceControl?.provider}
</Button>
</ChangeSourceControl>
) : (
<span className="text-muted-foreground">-</span>
)}
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Repository</span>
<span className="text-muted-foreground">{page.props.site.repository || '-'}</span>
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Branch</span>
{page.props.site.source_control_id ? (
<ChangeBranch site={page.props.site}>
<Button variant="outline" className="h-6">
{page.props.site.branch}
</Button>
</ChangeBranch>
) : (
'-'
)}
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>VHost</span>
<VHost site={page.props.site}>
<Button variant="outline" className="h-6">
Edit VHost
</Button>
</VHost>
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Web directory</span>
<span className="text-muted-foreground">{page.props.site.web_directory || '-'}</span>
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Path</span>
<CopyableBadge text={page.props.site.path} />
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>PHP version</span>
{page.props.site.php_version ? (
<ChangePHPVersion site={page.props.site}>
<Button variant="outline" className="h-6">
{page.props.site.php_version}
</Button>
</ChangePHPVersion>
) : (
<span className="text-muted-foreground">-</span>
)}
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Status</span>
<Badge variant={page.props.site.status_color}>{page.props.site.status}</Badge>
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Created at</span>
<span className="text-muted-foreground">
<DateTime date={page.props.site.created_at} />
</span>
</div>
</CardContent>
</Card>
<Card className="border-destructive/50">
<CardHeader>
<CardTitle>Delete site</CardTitle>
<CardDescription>Here you can delete the site.</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-2 p-4">
<p>please note that this action is irreversible and will delete all data associated with the site.</p>
<DeleteSite site={page.props.site}>
<Button variant="destructive">Delete site</Button>
</DeleteSite>
</div>
</CardContent>
</Card>
</Container>
</ServerLayout>
);
}