Mirror/gitea-mirror
1
0
Fork 0
mirror of https://github.com/RayLabsHQ/gitea-mirror.git synced 2025-12-08 12:36:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor: simplify ConfigCardSkeleton structure and enhance layout in ConfigTabs component

Browse Source
This commit is contained in:
Arunavo Ray
2025-05-24 10:53:33 +05:30
parent 645d495e80
commit a1da82a718
1 changed files with 128 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/config/ConfigTabs.tsx
View File

@@ -1,11 +1,4 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { GitHubConfigForm } from './GitHubConfigForm'; import { GitHubConfigForm } from './GitHubConfigForm';
import { GiteaConfigForm } from './GiteaConfigForm'; import { GiteaConfigForm } from './GiteaConfigForm';
import { ScheduleConfigForm } from './ScheduleConfigForm'; import { ScheduleConfigForm } from './ScheduleConfigForm';
@@ -192,18 +185,20 @@ export function ConfigTabs() {
function ConfigCardSkeleton() { function ConfigCardSkeleton() {
return ( return (
<Card> <div className="space-y-6">
<CardHeader className="flex-row justify-between"> {/* Header section */}
<div className="flex flex-col gap-y-1.5 m-0"> <div className="flex flex-row justify-between items-start">
<Skeleton className="h-6 w-48" /> <div className="flex flex-col gap-y-1.5">
<Skeleton className="h-8 w-48" />
<Skeleton className="h-4 w-72" /> <Skeleton className="h-4 w-72" />
</div> </div>
<div className="flex gap-x-4"> <div className="flex gap-x-4">
<Skeleton className="h-10 w-36" /> <Skeleton className="h-10 w-36" />
<Skeleton className="h-10 w-36" /> <Skeleton className="h-10 w-36" />
</div> </div>
</CardHeader> </div>
<CardContent>
{/* Content section */}
<div className="flex flex-col gap-y-4"> <div className="flex flex-col gap-y-4">
<div className="flex gap-x-4"> <div className="flex gap-x-4">
<div className="w-1/2 border rounded-lg p-4"> <div className="w-1/2 border rounded-lg p-4">
@@ -238,25 +233,26 @@ export function ConfigTabs() {
</div> </div>
</div> </div>
</div> </div>
</CardContent> </div>
</Card>
); );
} }
return isLoading ? ( return isLoading ? (
<div className="flex flex-col gap-y-6"> <div className="space-y-6">
<ConfigCardSkeleton /> <ConfigCardSkeleton />
</div> </div>
) : ( ) : (
<div className="flex flex-col gap-y-6"> <div className="space-y-6">
<Card> {/* Header section */}
<CardHeader className="flex-row justify-between"> <div className="flex flex-row justify-between items-start">
<div className="flex flex-col gap-y-1.5 m-0"> <div className="flex flex-col gap-y-1.5">
<CardTitle>Configuration Settings</CardTitle> <h1 className="text-2xl font-semibold leading-none tracking-tight">
<CardDescription> Configuration Settings
</h1>
<p className="text-sm text-muted-foreground">
Configure your GitHub and Gitea connections, and set up automatic Configure your GitHub and Gitea connections, and set up automatic
mirroring. mirroring.
</CardDescription> </p>
</div> </div>
<div className="flex gap-x-4"> <div className="flex gap-x-4">
<Button <Button
@@ -294,8 +290,9 @@ export function ConfigTabs() {
Save Configuration Save Configuration
</Button> </Button>
</div> </div>
</CardHeader> </div>
<CardContent>
{/* Content section */}
<div className="flex flex-col gap-y-4"> <div className="flex flex-col gap-y-4">
<div className="flex gap-x-4"> <div className="flex gap-x-4">
<GitHubConfigForm <GitHubConfigForm
@@ -336,8 +333,6 @@ export function ConfigTabs() {
} }
/> />
</div> </div>
</CardContent>
</Card>
</div> </div>
); );
} }