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"> <div className="neuro-card mb-6 overflow-hidden w-full">
<Tabs defaultValue="daily" value={selectedTab} onValueChange={setSelectedTab} className="w-full"> <Tabs defaultValue="daily" value={selectedTab} onValueChange={setSelectedTab} className="w-full">
<TabsList className="grid grid-cols-3 mb-4 bg-transparent"> <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>
<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>
<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> </TabsTrigger>
</TabsList> </TabsList>

3
src/components/ui/tabs.tsx
View File

@@ -1,3 +1,4 @@
import * as React from "react" import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs" import * as TabsPrimitive from "@radix-ui/react-tabs"
@@ -27,7 +28,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger <TabsPrimitive.Trigger
ref={ref} ref={ref}
className={cn( className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:text-gray-500 data-[state=inactive]:hover:text-gray-700 data-[state=inactive]:hover:bg-gray-100/30",
className className
)} )}
{...props} {...props}