gitark/taskncoffee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Card component layout and styles, adding an image background and improving badge styles for better user experience.

Browse Source
This commit is contained in:
IluaAir
2025-11-14 23:30:12 +03:00
parent 1a675834fe
commit 0d92ea9893
2 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
taskncoffee-app/src/components/Card.jsx
View File

@@ -3,16 +3,19 @@ import { cn } from '@/lib/utils'
export default function CardComponent() {
return (
<div className={cn(styles.card.filled, "flex flex-col gap-2 min-sm:w-1/3 p-4 h-fit")}>
<h1 className={styles.text.h1}>Card</h1>
<div className="flex items-center gap-2">
<span className={styles.badge.low}>Low</span>
<span className={styles.badge.medium}>Medium</span>
<span className={styles.badge.high}>High</span>
<span className={styles.badge.critical}>Critical</span>
<div className={cn(styles.card.filled, "flex flex-col min-sm:w-1/3 min-h-[300px] overflow-hidden relative")}>
<img src="/images/a.jpg" alt="Card image" className="absolute -mx-6 -mt-6" />
<div className="flex flex-col gap-2 p-6 relative z-10 pt-[calc(16rem+1.5rem)]">
<h1 className={styles.text.h1}>Card</h1>
<div className="flex items-center gap-2">
<span className={cn(styles.badge.low)}>Low</span>
<span className={cn(styles.badge.medium)}>Medium</span>
<span className={cn(styles.badge.high)}>High</span>
<span className={cn(styles.badge.critical)}>Critical</span>
</div>
<p className={cn(styles.text.smallMuted, "flex-1 line-clamp-2")}>Card description</p>
<button className={cn(styles.button.primaryNeon, "w-1/5")}><span className={styles.text.neonBlue}>Complete</span></button>
</div>
<p className={styles.text.smallMuted}>Card description</p>
<button className={cn(styles.button.primaryNeon, "w-1/4")}><span className={styles.text.neonBlue}>Complete</span></button>
</div>
)
}

10
taskncoffee-app/src/lib/styles.js
View File

@@ -104,13 +104,13 @@ export const textStyles = {
// Badge/Chip Styles
export const badgeStyles = {
// Default badge
default: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-primary/20 text-primary border border-primary/30",
default: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-primary/20 text-primary border border-primary/30 cursor-default select-none",
// Priority badges
low: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30",
medium: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-yellow-500/20 text-yellow-400 border border-yellow-500/30",
high: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-orange-500/20 text-orange-400 border border-orange-500/30",
critical: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-red-500/20 text-red-400 border border-red-500/30",
low: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30 cursor-default select-none",
medium: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-yellow-500/20 text-yellow-400 border border-yellow-500/30 cursor-default select-none",
high: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-orange-500/20 text-orange-400 border border-orange-500/30 cursor-default select-none",
critical: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-red-500/20 text-red-400 border border-red-500/30 cursor-default select-none",
// Status badges
success: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30",