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

Improved run layout

Browse Source
This commit is contained in:
selimaj-dev
2026-02-07 01:31:47 +01:00
parent 3e22d2da8a
commit 71b966088b
3 changed files with 71 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/problems/components/ProblemCard.tsx
+27 -21
View File
@@ -32,16 +32,17 @@ const ProblemCard = ({
return (
<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 h-full flex flex-col justify-between"
style={{
animationDelay: `${index * 0.1}s`,
animationFillMode: "forwards",
}}
>
{/* 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 pointer-events-none" />
<div className="relative">
{/* Content */}
<div className="relative flex flex-col h-full">
{/* Header */}
<div className="flex items-start justify-between mb-3">
<h3 className="font-semibold text-foreground group-hover:text-primary transition-colors">
@@ -66,25 +67,30 @@ const ProblemCard = ({
))}
</div>
{/* Stats */}
<div className="flex items-center gap-4 text-sm text-muted-foreground">
{bestTime && (
<div className="flex items-center gap-1.5">
<Clock className="h-4 w-4 text-primary" />
<span className="font-mono">{bestTime}</span>
</div>
)}
<div className="flex items-center gap-1.5">
<Users className="h-4 w-4" />
<span>{attempts} runs</span>
</div>
</div>
{/* Spacer */}
<div className="flex-1" />
{/* Quick run button - appears on hover */}
<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 size="p2">
<Zap className="h-4 w-4" />
</Button>
{/* Stats + Action */}
<div className="flex items-center justify-between mt-4 text-sm text-muted-foreground">
<div className="flex items-center gap-4">
{bestTime && (
<div className="flex items-center gap-1.5">
<Clock className="h-4 w-4 text-primary" />
<span className="font-mono">{bestTime}</span>
</div>
)}
<div className="flex items-center gap-1.5">
<Users className="h-4 w-4" />
<span>{attempts} runs</span>
</div>
</div>
{/* Quick run button */}
<div className="opacity-0 group-hover:opacity-100 transition-all duration-300">
<Button size="p2">
<Zap className="h-4 w-4" />
</Button>
</div>
</div>
</div>
</div>
src/app/run/page.tsx
+7 -6
View File
@@ -9,6 +9,7 @@ import Editor from "./components/Editor";
import useAction from "@/hook/use-action";
import { getLiveRun } from "@/modules/live-run/actions";
import ProblemCard from "../problems/components/ProblemCard";
import ProfileCard from "@/components/app/ProfileCard";
export default function Run() {
const [runInfo] = useAction(getLiveRun);
@@ -23,17 +24,17 @@ export default function Run() {
<div className="h-svh px-20 pt-24 pb-12 flex gap-8">
<div className="h-full w-full flex flex-col gap-4">
<div className="w-full flex gap-5">
<div className="flex-1">
<div className="flex-1 animate-fade-in opacity-0 duration-1000">
<ProfileCard user={{ username: "selimaj", rank: 1 }} />
</div>
<div className="flex-1 animate-fade-in opacity-0 duration-1000">
{runInfo && <RunTimer runInfo={runInfo} />}
</div>
<div className="flex-1">
<ProblemCard name="Idk" difficulty="hard" tags={[]} attempts={0} />
</div>
<div className="flex-1">
{runInfo && <RunTimer runInfo={runInfo} />}
</div>
</div>
{/* Editor */}