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

Update Card component to use a background image and adjust layout for improved aesthetics and responsiveness.

Browse Source
This commit is contained in:
IluaAir
2025-11-19 01:45:37 +03:00
parent 0d92ea9893
commit cb73cd219b
2 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
taskncoffee-app/public/images/a.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 399 KiB

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

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