ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance budget tab appearance

Browse Source 
Improve the visual distinction of the selected tab in the BudgetProgressCard component by adjusting the shadow.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-21 08:48:14 +00:00
parent 14b04cb384
commit bf2d275d9a
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/BudgetProgressCard.tsx
View File

@@ -35,13 +35,22 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
<div className="neuro-card mb-6 overflow-hidden w-full">
<Tabs defaultValue="daily" value={selectedTab} onValueChange={setSelectedTab} className="w-full">
<TabsList className="grid grid-cols-3 mb-4 bg-transparent">
<TabsTrigger value="daily" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
<TabsTrigger
value="daily"
className="data-[state=active]:shadow-[inset_4px_4px_8px_rgba(209,217,230,0.9),inset_-4px_-4px_8px_rgba(255,255,255,0.9)] data-[state=active]:bg-transparent data-[state=active]:font-medium transition-all duration-200"
>
오늘
</TabsTrigger>
<TabsTrigger value="weekly" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
<TabsTrigger
value="weekly"
className="data-[state=active]:shadow-[inset_4px_4px_8px_rgba(209,217,230,0.9),inset_-4px_-4px_8px_rgba(255,255,255,0.9)] data-[state=active]:bg-transparent data-[state=active]:font-medium transition-all duration-200"
>
주간
</TabsTrigger>
<TabsTrigger value="monthly" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
<TabsTrigger
value="monthly"
className="data-[state=active]:shadow-[inset_4px_4px_8px_rgba(209,217,230,0.9),inset_-4px_-4px_8px_rgba(255,255,255,0.9)] data-[state=active]:bg-transparent data-[state=active]:font-medium transition-all duration-200"
>
월간
</TabsTrigger>
</TabsList>