marketing-shibata50/9router
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance layout

Browse source
This commit is contained in:
decolua 2026-01-31 12:58:04 +07:00
parent 8c37b39eed
commit 8897df5036
23 changed files with 458 additions and 326 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/shared/components/Card.js
View file

@ -24,9 +24,9 @@ export default function Card({
<div
className={cn(
"bg-surface",
"border border-border",
"rounded-xl shadow-soft",
hover && "hover:shadow-warm hover:border-primary/30 transition-all cursor-pointer",
"border border-black/5 dark:border-white/5",
"rounded-lg shadow-sm",
hover && "hover:shadow-md hover:border-primary/30 transition-all cursor-pointer",
paddings[padding],
className
)}
@ -63,8 +63,8 @@ Card.Section = function CardSection({ children, className, ...props }) {
<div
className={cn(
"p-4 rounded-lg",
"bg-surface",
"border border-border",
"bg-black/[0.02] dark:bg-white/[0.02]",
"border border-black/5 dark:border-white/5",
className
)}
{...props}
@ -79,8 +79,9 @@ Card.Row = function CardRow({ children, className, ...props }) {
return (
<div
className={cn(
"p-3 -mx-3 px-3 border-b border-border last:border-b-0 transition-colors",
"hover:bg-sidebar",
"p-3 -mx-3 px-3 transition-colors",
"border-b border-black/5 dark:border-white/5 last:border-b-0",
"hover:bg-black/[0.02] dark:hover:bg-white/[0.02]",
className
)}
{...props}
@ -90,3 +91,31 @@ Card.Row = function CardRow({ children, className, ...props }) {
);
};
// Sub-component: List item with hover actions (macOS style)
Card.ListItem = function CardListItem({
children,
actions,
className,
...props
}) {
return (
<div
className={cn(
"group flex items-center justify-between p-3 -mx-3 px-3",
"border-b border-black/[0.03] dark:border-white/[0.03] last:border-b-0",
"hover:bg-black/[0.02] dark:hover:bg-white/[0.02]",
"transition-colors",
className
)}
{...props}
>
<div className="flex-1 min-w-0">{children}</div>
{actions && (
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
{actions}
</div>
)}
</div>
);
};