style(settings): unify tab transition animations

Add framer-motion fade-in and slide-up animations to General and
Advanced tabs, matching the existing Usage and About tab animations.
This commit is contained in:
Jason
2025-12-21 09:29:14 +08:00
parent ddbff070d5
commit c4f1e90893
+15 -4
View File
@@ -1,4 +1,5 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { motion } from "framer-motion";
import {
Loader2,
Save,
@@ -223,7 +224,12 @@ export function SettingsPage({
<div className="flex-1 overflow-y-auto overflow-x-hidden pr-2">
<TabsContent value="general" className="space-y-6 mt-0">
{settings ? (
<>
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
className="space-y-6"
>
<LanguageSettings
value={settings.language}
onChange={(lang) => handleAutoSave({ language: lang })}
@@ -233,13 +239,18 @@ export function SettingsPage({
settings={settings}
onChange={handleAutoSave}
/>
</>
</motion.div>
) : null}
</TabsContent>
<TabsContent value="advanced" className="space-y-6 mt-0 pb-6">
{settings ? (
<div className="space-y-4">
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
className="space-y-4"
>
<Accordion
type="multiple"
defaultValue={[]}
@@ -494,7 +505,7 @@ export function SettingsPage({
)}
</Button>
</div>
</div>
</motion.div>
) : null}
</TabsContent>