| 84 | }; |
| 85 | |
| 86 | const renderTopics = () => { |
| 87 | return ( |
| 88 | <AnimatePresence> |
| 89 | <motion.div |
| 90 | initial={{ opacity: 0, x: -20 }} |
| 91 | animate={{ opacity: 1, x: 0 }} |
| 92 | exit={{ x: -20 }} |
| 93 | transition={{ duration: 0.3 }} |
| 94 | className={`${visible ? "translate-y-0" : "-translate-y-full"} px-6`} |
| 95 | > |
| 96 | <Card className="border-primary/10 no-scrollbar max-h-[50vh] w-fit overflow-auto bg-black/10 pt-4 backdrop-blur-lg"> |
| 97 | {track?.problems?.map((problem: { id: string; title: string }, index: number) => { |
| 98 | const isDisabled = currentTrack === `${track.id}/${problem.id}`; |
| 99 | return ( |
| 100 | <CardContent key={index} className={isDisabled ? "opacity-50" : ""}> |
| 101 | <Link |
| 102 | key={problem.id} |
| 103 | prefetch |
| 104 | className="w-full max-w-screen-md" |
| 105 | href={`/tracks/${track.id}/${problem.id}`} |
| 106 | onClick={(e) => isDisabled && e.preventDefault()} |
| 107 | > |
| 108 | {index + 1} - {problem.title} |
| 109 | </Link> |
| 110 | </CardContent> |
| 111 | ); |
| 112 | })} |
| 113 | </Card> |
| 114 | </motion.div> |
| 115 | </AnimatePresence> |
| 116 | ); |
| 117 | }; |
| 118 | |
| 119 | const renderUIModeToggleButton = () => ( |
| 120 | <Button onClick={toggleViewMode} className="flex gap-2"> |