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