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>
)
}