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

refactor: update Card components to use self-start class for consistent alignment

Browse Source
This commit is contained in:
Arunavo Ray
2025-06-12 15:29:47 +05:30
parent 2eda800a7c
commit 544b60f881
7 changed files with 131 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/config/AdvancedOptionsForm.tsx
View File

@@ -32,7 +32,7 @@ export function AdvancedOptionsForm({
}; };
return ( return (
<Card> <Card className="self-start">
<CardHeader> <CardHeader>
<CardTitle className="text-lg font-semibold flex items-center justify-between"> <CardTitle className="text-lg font-semibold flex items-center justify-between">
Advanced Options Advanced Options

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

@@ -5,7 +5,7 @@ import { ScheduleConfigForm } from './ScheduleConfigForm';
import { DatabaseCleanupConfigForm } from './DatabaseCleanupConfigForm'; import { DatabaseCleanupConfigForm } from './DatabaseCleanupConfigForm';
import { MirrorOptionsForm } from './MirrorOptionsForm'; import { MirrorOptionsForm } from './MirrorOptionsForm';
import { AdvancedOptionsForm } from './AdvancedOptionsForm'; import { AdvancedOptionsForm } from './AdvancedOptionsForm';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'; // Removed Tabs import as we're switching to grid layout
import type { import type {
ConfigApiResponse, ConfigApiResponse,
GiteaConfig, GiteaConfig,
@@ -537,51 +537,66 @@ export function ConfigTabs() {
</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" />
</div> </div>
</div> </div>
{/* Content section */} {/* Content section - Grid layout */}
<div className="flex flex-col gap-y-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="flex gap-x-4"> {/* GitHub & Gitea connections */}
<div className="w-1/2 border rounded-lg p-4"> <div className="border rounded-lg p-4">
<div className="flex justify-between items-center mb-4"> <div className="flex justify-between items-center mb-4">
<Skeleton className="h-6 w-40" /> <Skeleton className="h-6 w-40" />
<Skeleton className="h-9 w-32" /> <Skeleton className="h-9 w-32" />
</div>
<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="flex gap-x-4"> <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">
<div className="space-y-4"> <Skeleton className="h-6 w-40" />
<Skeleton className="h-8 w-48" /> <Skeleton className="h-9 w-32" />
<Skeleton className="h-16 w-full" />
<Skeleton className="h-8 w-32" />
</div>
</div> </div>
<div className="w-1/2 border rounded-lg p-4"> <div className="space-y-4">
<div className="space-y-4"> <Skeleton className="h-20 w-full" />
<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" />
</div> </div>
</div>
{/* Schedule & Database Cleanup */}
<div className="border rounded-lg p-4">
<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 className="border rounded-lg p-4">
<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>
{/* Mirror Options & Advanced - Full width sections */}
<div className="space-y-4">
<div className="border rounded-lg p-4">
<Skeleton className="h-8 w-48 mb-4" />
<div className="space-y-4">
<Skeleton className="h-16 w-full" />
<Skeleton className="h-24 w-full" />
</div>
</div>
<div className="border rounded-lg p-4">
<Skeleton className="h-8 w-48 mb-4" />
<div className="space-y-4">
<Skeleton className="h-16 w-full" />
</div> </div>
</div> </div>
</div> </div>
@@ -633,49 +648,42 @@ export function ConfigTabs() {
</div> </div>
</div> </div>
{/* Content section */} {/* Content section - Grid layout */}
<Tabs defaultValue="connections" className="w-full"> <div className="space-y-6">
<TabsList className="grid w-full grid-cols-4"> {/* GitHub & Gitea connections - Side by side */}
<TabsTrigger value="connections">Connections</TabsTrigger> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<TabsTrigger value="mirror">Mirror Options</TabsTrigger> <GitHubConfigForm
<TabsTrigger value="schedule">Schedule & Cleanup</TabsTrigger> config={config.githubConfig}
<TabsTrigger value="advanced">Advanced</TabsTrigger> setConfig={update =>
</TabsList> setConfig(prev => ({
...prev,
githubConfig:
typeof update === 'function'
? update(prev.githubConfig)
: update,
}))
}
onAutoSave={autoSaveGitHubConfig}
isAutoSaving={isAutoSavingGitHub}
/>
<GiteaConfigForm
config={config.giteaConfig}
setConfig={update =>
setConfig(prev => ({
...prev,
giteaConfig:
typeof update === 'function'
? update(prev.giteaConfig)
: update,
}))
}
onAutoSave={autoSaveGiteaConfig}
isAutoSaving={isAutoSavingGitea}
/>
</div>
<TabsContent value="connections" className="mt-6"> {/* Mirror Options - Full width */}
<div className="flex gap-x-4"> <div>
<GitHubConfigForm
config={config.githubConfig}
setConfig={update =>
setConfig(prev => ({
...prev,
githubConfig:
typeof update === 'function'
? update(prev.githubConfig)
: update,
}))
}
onAutoSave={autoSaveGitHubConfig}
isAutoSaving={isAutoSavingGitHub}
/>
<GiteaConfigForm
config={config.giteaConfig}
setConfig={update =>
setConfig(prev => ({
...prev,
giteaConfig:
typeof update === 'function'
? update(prev.giteaConfig)
: update,
}))
}
onAutoSave={autoSaveGiteaConfig}
isAutoSaving={isAutoSavingGitea}
/>
</div>
</TabsContent>
<TabsContent value="mirror" className="mt-6">
<MirrorOptionsForm <MirrorOptionsForm
config={config.mirrorOptions} config={config.mirrorOptions}
setConfig={update => setConfig={update =>
@@ -690,46 +698,42 @@ export function ConfigTabs() {
onAutoSave={autoSaveMirrorOptions} onAutoSave={autoSaveMirrorOptions}
isAutoSaving={isAutoSavingMirrorOptions} isAutoSaving={isAutoSavingMirrorOptions}
/> />
</TabsContent> </div>
<TabsContent value="schedule" className="mt-6"> {/* Schedule & Database Cleanup - Side by side */}
<div className="flex gap-x-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="w-1/2"> <ScheduleConfigForm
<ScheduleConfigForm config={config.scheduleConfig}
config={config.scheduleConfig} setConfig={update =>
setConfig={update => setConfig(prev => ({
setConfig(prev => ({ ...prev,
...prev, scheduleConfig:
scheduleConfig: typeof update === 'function'
typeof update === 'function' ? update(prev.scheduleConfig)
? update(prev.scheduleConfig) : update,
: update, }))
})) }
} onAutoSave={autoSaveScheduleConfig}
onAutoSave={autoSaveScheduleConfig} isAutoSaving={isAutoSavingSchedule}
isAutoSaving={isAutoSavingSchedule} />
/> <DatabaseCleanupConfigForm
</div> config={config.cleanupConfig}
<div className="w-1/2"> setConfig={update =>
<DatabaseCleanupConfigForm setConfig(prev => ({
config={config.cleanupConfig} ...prev,
setConfig={update => cleanupConfig:
setConfig(prev => ({ typeof update === 'function'
...prev, ? update(prev.cleanupConfig)
cleanupConfig: : update,
typeof update === 'function' }))
? update(prev.cleanupConfig) }
: update, onAutoSave={autoSaveCleanupConfig}
})) isAutoSaving={isAutoSavingCleanup}
} />
onAutoSave={autoSaveCleanupConfig} </div>
isAutoSaving={isAutoSavingCleanup}
/>
</div>
</div>
</TabsContent>
<TabsContent value="advanced" className="mt-6"> {/* Advanced options - Full width */}
<div>
<AdvancedOptionsForm <AdvancedOptionsForm
config={config.advancedOptions} config={config.advancedOptions}
setConfig={update => setConfig={update =>
@@ -744,8 +748,8 @@ export function ConfigTabs() {
onAutoSave={autoSaveAdvancedOptions} onAutoSave={autoSaveAdvancedOptions}
isAutoSaving={isAutoSavingAdvancedOptions} isAutoSaving={isAutoSavingAdvancedOptions}
/> />
</TabsContent> </div>
</Tabs> </div>
</div> </div>
); );
} }

2
src/components/config/DatabaseCleanupConfigForm.tsx
View File

@@ -94,7 +94,7 @@ export function DatabaseCleanupConfigForm({
]; ];
return ( return (
<Card> <Card className="self-start">
<CardContent className="pt-6 relative"> <CardContent className="pt-6 relative">
{isAutoSaving && ( {isAutoSaving && (
<div className="absolute top-4 right-4 flex items-center text-sm text-muted-foreground"> <div className="absolute top-4 right-4 flex items-center text-sm text-muted-foreground">

2
src/components/config/GitHubConfigForm.tsx
View File

@@ -68,7 +68,7 @@ export function GitHubConfigForm({ config, setConfig, onAutoSave, isAutoSaving }
}; };
return ( return (
<Card className="w-full"> <Card className="w-full self-start">
<CardHeader className="flex flex-row items-center justify-between gap-4"> <CardHeader className="flex flex-row items-center justify-between gap-4">
<CardTitle className="text-lg font-semibold"> <CardTitle className="text-lg font-semibold">
GitHub Configuration GitHub Configuration

2
src/components/config/GiteaConfigForm.tsx
View File

@@ -91,7 +91,7 @@ export function GiteaConfigForm({ config, setConfig, onAutoSave, isAutoSaving }:
}; };
return ( return (
<Card className="w-full"> <Card className="w-full self-start">
<CardHeader className="flex flex-row items-center justify-between gap-4"> <CardHeader className="flex flex-row items-center justify-between gap-4">
<CardTitle className="text-lg font-semibold"> <CardTitle className="text-lg font-semibold">
Gitea Configuration Gitea Configuration

2
src/components/config/MirrorOptionsForm.tsx
View File

@@ -55,7 +55,7 @@ export function MirrorOptionsForm({
}; };
return ( return (
<Card> <Card className="self-start">
<CardHeader> <CardHeader>
<CardTitle className="text-lg font-semibold flex items-center justify-between"> <CardTitle className="text-lg font-semibold flex items-center justify-between">
Mirror Options Mirror Options

2
src/components/config/ScheduleConfigForm.tsx
View File

@@ -54,7 +54,7 @@ export function ScheduleConfigForm({
]; ];
return ( return (
<Card> <Card className="self-start">
<CardContent className="pt-6 relative"> <CardContent className="pt-6 relative">
{isAutoSaving && ( {isAutoSaving && (
<div className="absolute top-4 right-4 flex items-center text-sm text-muted-foreground"> <div className="absolute top-4 right-4 flex items-center text-sm text-muted-foreground">