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

261
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,152 +185,154 @@ 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>
<div className="flex flex-col gap-y-4"> {/* Content section */}
<div className="flex gap-x-4"> <div className="flex flex-col gap-y-4">
<div className="w-1/2 border rounded-lg p-4"> <div className="flex gap-x-4">
<div className="flex justify-between items-center mb-4"> <div className="w-1/2 border rounded-lg p-4">
<Skeleton className="h-6 w-40" /> <div className="flex justify-between items-center mb-4">
<Skeleton className="h-9 w-32" /> <Skeleton className="h-6 w-40" />
</div> <Skeleton className="h-9 w-32" />
<div className="space-y-4">
<Skeleton className="h-20 w-full" />
<Skeleton className="h-20 w-full" />
<Skeleton className="h-32 w-full" />
</div>
</div> </div>
<div className="w-1/2 border rounded-lg p-4"> <div className="space-y-4">
<div className="flex justify-between items-center mb-4"> <Skeleton className="h-20 w-full" />
<Skeleton className="h-6 w-40" /> <Skeleton className="h-20 w-full" />
<Skeleton className="h-9 w-32" /> <Skeleton className="h-32 w-full" />
</div>
<div className="space-y-4">
<Skeleton className="h-20 w-full" />
<Skeleton className="h-20 w-full" />
<Skeleton className="h-20 w-full" />
<Skeleton className="h-20 w-full" />
</div>
</div> </div>
</div> </div>
<div className="border rounded-lg p-4"> <div className="w-1/2 border rounded-lg p-4">
<div className="flex justify-between items-center mb-4">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-9 w-32" />
</div>
<div className="space-y-4"> <div className="space-y-4">
<Skeleton className="h-8 w-48" /> <Skeleton className="h-20 w-full" />
<Skeleton className="h-16 w-full" /> <Skeleton className="h-20 w-full" />
<Skeleton className="h-8 w-32" /> <Skeleton className="h-20 w-full" />
<Skeleton className="h-20 w-full" />
</div> </div>
</div> </div>
</div> </div>
</CardContent> <div className="border rounded-lg p-4">
</Card> <div className="space-y-4">
<Skeleton className="h-8 w-48" />
<Skeleton className="h-16 w-full" />
<Skeleton className="h-8 w-32" />
</div>
</div>
</div>
</div>
); );
} }
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
Configure your GitHub and Gitea connections, and set up automatic </h1>
mirroring. <p className="text-sm text-muted-foreground">
</CardDescription> Configure your GitHub and Gitea connections, and set up automatic
</div> mirroring.
<div className="flex gap-x-4"> </p>
<Button </div>
onClick={handleImportGitHubData} <div className="flex gap-x-4">
disabled={isSyncing || !isConfigSaved} <Button
title={ onClick={handleImportGitHubData}
!isConfigSaved disabled={isSyncing || !isConfigSaved}
? 'Save configuration first' title={
: isSyncing !isConfigSaved
? 'Import in progress' ? 'Save configuration first'
: 'Import GitHub Data' : isSyncing
} ? 'Import in progress'
> : 'Import GitHub Data'
{isSyncing ? ( }
<> >
<RefreshCw className="h-4 w-4 animate-spin mr-1" /> {isSyncing ? (
Import GitHub Data <>
</> <RefreshCw className="h-4 w-4 animate-spin mr-1" />
) : ( Import GitHub Data
<> </>
<RefreshCw className="h-4 w-4 mr-1" /> ) : (
Import GitHub Data <>
</> <RefreshCw className="h-4 w-4 mr-1" />
)} Import GitHub Data
</Button> </>
<Button )}
onClick={handleSaveConfig} </Button>
disabled={!isConfigFormValid()} <Button
title={ onClick={handleSaveConfig}
!isConfigFormValid() disabled={!isConfigFormValid()}
? 'Please fill all required fields' title={
: 'Save Configuration' !isConfigFormValid()
} ? 'Please fill all required fields'
> : 'Save Configuration'
Save Configuration }
</Button> >
</div> Save Configuration
</CardHeader> </Button>
<CardContent> </div>
<div className="flex flex-col gap-y-4"> </div>
<div className="flex gap-x-4">
<GitHubConfigForm {/* Content section */}
config={config.githubConfig} <div className="flex flex-col gap-y-4">
setConfig={update => <div className="flex gap-x-4">
setConfig(prev => ({ <GitHubConfigForm
...prev, config={config.githubConfig}
githubConfig: setConfig={update =>
typeof update === 'function' setConfig(prev => ({
? update(prev.githubConfig) ...prev,
: update, githubConfig:
})) typeof update === 'function'
} ? update(prev.githubConfig)
/> : update,
<GiteaConfigForm }))
config={config.giteaConfig} }
setConfig={update => />
setConfig(prev => ({ <GiteaConfigForm
...prev, config={config.giteaConfig}
giteaConfig: setConfig={update =>
typeof update === 'function' setConfig(prev => ({
? update(prev.giteaConfig) ...prev,
: update, giteaConfig:
})) typeof update === 'function'
} ? update(prev.giteaConfig)
/> : update,
</div> }))
<ScheduleConfigForm }
config={config.scheduleConfig} />
setConfig={update => </div>
setConfig(prev => ({ <ScheduleConfigForm
...prev, config={config.scheduleConfig}
scheduleConfig: setConfig={update =>
typeof update === 'function' setConfig(prev => ({
? update(prev.scheduleConfig) ...prev,
: update, scheduleConfig:
})) typeof update === 'function'
} ? update(prev.scheduleConfig)
/> : update,
</div> }))
</CardContent> }
</Card> />
</div>
</div> </div>
); );
} }