Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add button to directly navigate from Landing page to Track/Blog Page #638

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add button to directly navigate from Landing page to Track/Blog Page #638

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 27 additions & 12 deletions apps/web/components/TrackCard-2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { motion, useAnimation } from "framer-motion";
import { Track, Problem } from "@prisma/client";
import { TrackPreview } from "./TrackPreview";
import { formatDistanceToNow } from "date-fns";
import { Button } from "@repo/ui";
import Link from "next/link";

interface TrackCardProps extends Track {
problems: Problem[];
Expand Down Expand Up @@ -52,29 +54,42 @@ export function TrackCard2({ track }: { track: TrackCardProps }) {
initial="hidden"
animate={controls}
variants={variants}
className="flex items-start flex-row gap-4 cursor-pointer transition-all bg-primary/5 backdrop-blur-xl duration-300 hover:-translate-y-1 rounded-xl p-4 justify-between md:items-center"
className="bg-primary/5 flex cursor-pointer flex-row items-start justify-between gap-4 rounded-xl p-4 backdrop-blur-xl transition-all duration-300 hover:-translate-y-1 md:items-center"
onClick={() => setShowPreview(true)}
>
<img src={track.image} alt={track.title} className="size-20 aspect-square object-cover rounded-xl" />
<div className="flex flex-col md:flex-row gap-4 w-full md:items-center justify-between">
<img src={track.image} alt={track.title} className="aspect-square size-20 rounded-xl object-cover" />
<div className="flex w-full flex-col justify-between gap-4 md:flex-row md:items-center">
<div className="flex flex-col gap-2">
<h3 className="text-xl md:text-2xl tracking-tighter font-semibold lg:line-clamp-1">{track.title}</h3>
<h3 className="text-xl font-semibold tracking-tighter md:text-2xl lg:line-clamp-1">{track.title}</h3>
{track.categories.map((item) => (
<p
key={item.category.id}
className="bg-secondary/25 border border-primary/10 rounded-lg px-3 py-2 text-sm w-fit cursor-default"
className="bg-secondary/25 border-primary/10 w-fit cursor-default rounded-lg border px-3 py-2 text-sm"
>
{item.category.category}
</p>
))}
</div>
<div className="flex flex-row md:flex-col gap-2 w-full md:w-[30%] md:items-end items-center">
<p className="text-primary/80 md:text-lg tracking-tight text-blue-500 font-semibold">
{track.problems.length} Chapters
</p>
<p className="flex tracking-tight gap-2 text-primary/60 text-sm md:text-base">
{formatDistanceToNow(new Date(track.createdAt), { addSuffix: true })}
</p>
<div className="flex items-center gap-10 md:w-[40%]">
<div className="flex w-full flex-row items-center gap-2 md:flex-col md:items-end">
<p className="text-primary/80 font-semibold tracking-tight text-blue-500 md:text-lg">
{track.problems.length} Chapters
</p>
<p className="text-primary/60 flex gap-2 text-sm tracking-tight md:text-base">
{formatDistanceToNow(new Date(track.createdAt), { addSuffix: true })}
</p>
</div>
<div>
<Link href={track.problems.length ? `/tracks/${track.id}/${track.problems[0]?.id}` : ""}>
<Button
size={"lg"}
className="flex items-center justify-center bg-blue-600 text-white transition-all duration-300 hover:bg-blue-500 py-8"
onClick={(e) => e.stopPropagation()}
>
Start
</Button>
</Link>
</div>
</div>
</div>
</motion.div>
Expand Down
Loading