orus-dev/dev-run
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stat card hover animations and problem card quick run

Browse Source
This commit is contained in:
selimaj-dev
2026-02-03 15:27:57 +01:00
parent 05c1307ad7
commit 9af328eb6b
2 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
-1
View File
@@ -215,7 +215,6 @@
} }
.card-hover:hover { .card-hover:hover {
@apply -translate-y-1;
box-shadow: 0 10px 40px color-mix(in oklch, var(--primary) 15%, transparent); box-shadow: 0 10px 40px color-mix(in oklch, var(--primary) 15%, transparent);
} }
src/app/problems/components/ProblemCard.tsx
+20 -8
View File
@@ -9,7 +9,14 @@ interface ProblemCardProps {
index?: number; index?: number;
} }
const ProblemCard = ({ name, difficulty, tags, bestTime, attempts, index = 0 }: ProblemCardProps) => { const ProblemCard = ({
name,
difficulty,
tags,
bestTime,
attempts,
index = 0,
}: ProblemCardProps) => {
const difficultyStyles = { const difficultyStyles = {
easy: "diff-easy", easy: "diff-easy",
medium: "diff-medium", medium: "diff-medium",
@@ -23,20 +30,25 @@ const ProblemCard = ({ name, difficulty, tags, bestTime, attempts, index = 0 }:
}; };
return ( return (
<div <div
className={`group relative bg-card border border-border rounded-xl p-5 card-hover cursor-pointer animate-fade-in opacity-0`} className={`group relative bg-card border border-border rounded-xl p-5 card-hover cursor-pointer animate-fade-in opacity-0`}
style={{ animationDelay: `${index * 0.1}s`, animationFillMode: 'forwards' }} style={{
animationDelay: `${index * 0.1}s`,
animationFillMode: "forwards",
}}
> >
{/* Glow effect on hover */} {/* Glow effect on hover */}
<div className="absolute inset-0 rounded-xl bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" /> <div className="absolute inset-0 rounded-xl bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
<div className="relative"> <div className="relative">
{/* Header */} {/* Header */}
<div className="flex items-start justify-between mb-3"> <div className="flex items-start justify-between mb-3">
<h3 className="font-semibold text-foreground group-hover:text-primary transition-colors"> <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors">
{name} {name}
</h3> </h3>
<span className={`px-2 py-1 rounded-md text-xs font-medium ${difficultyStyles[difficulty]}`}> <span
className={`px-2 py-1 rounded-md text-xs font-medium ${difficultyStyles[difficulty]}`}
>
{difficultyLabels[difficulty]} {difficultyLabels[difficulty]}
</span> </span>
</div> </div>
@@ -44,8 +56,8 @@ const ProblemCard = ({ name, difficulty, tags, bestTime, attempts, index = 0 }:
{/* Tags */} {/* Tags */}
<div className="flex flex-wrap gap-2 mb-4"> <div className="flex flex-wrap gap-2 mb-4">
{tags.map((tag) => ( {tags.map((tag) => (
<span <span
key={tag} key={tag}
className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs" className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs"
> >
{tag} {tag}
@@ -68,7 +80,7 @@ const ProblemCard = ({ name, difficulty, tags, bestTime, attempts, index = 0 }:
</div> </div>
{/* Quick run button - appears on hover */} {/* Quick run button - appears on hover */}
<div className="absolute top-1/2 right-4 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0"> <div className="absolute bottom-0 right-0 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
<button className="p-2 rounded-lg bg-primary text-primary-foreground"> <button className="p-2 rounded-lg bg-primary text-primary-foreground">
<Zap className="h-4 w-4" /> <Zap className="h-4 w-4" />
</button> </button>