-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSingleModule.tsx
More file actions
157 lines (141 loc) · 5.77 KB
/
Copy pathSingleModule.tsx
File metadata and controls
157 lines (141 loc) · 5.77 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
"use client";
import { MODULE_PAGE_URL } from "@/data/links";
import { ModuleMeta as Module } from "@/types/exercise.types";
import Link from "next/link";
import { ImageWithFallback } from "../Common/ImageWithFallback";
import clsx from "clsx";
import { CheckCircle, Lock, LockOpenIcon } from "lucide-react";
import { showErrorToast } from "@/utils/toast";
import { ModuleWithProgress } from "@/types/exercise.types";
import { LockClosedIcon } from "../ui/svg";
export const SingleModuleCard = ({ module }: { module: ModuleWithProgress }) => {
const {
id,
title,
slug,
// thumbnail,
description,
// level,
// estimatedTime,
// isLocked,
// isPassed,
// scorePercent,
locked: isLocked,
} = module;
// const isLocked = true;
const level= isLocked ? "Locked" : "available";
const isPassed = false;
const scorePercent = 0;
const estimatedTime = "10 minutes";
const thumbnail = "/images/modules/probability-intro.jpg";
return (
<div
className={clsx(
"group relative overflow-hidden rounded-xl bg-white shadow-one duration-300 hover:shadow-two dark:bg-dark dark:hover:shadow-gray-dark",
"transition-all",
)}
data-wow-delay=".1s"
>
<Link
href={MODULE_PAGE_URL(slug)}
onClick={(e) => {
if (!isLocked) return;
e.preventDefault();
showErrorToast(
"This module is locked. Please complete previous modules to unlock it.",
id,
);
}}
className="relative block aspect-[37/22] w-full"
>
<span
className={`absolute right-4 top-4 z-20 inline-flex items-center justify-center rounded-full px-3 py-1.5 text-xs font-semibold capitalize ${
isLocked
? "bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400"
: "bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-sm dark:from-blue-600 dark:to-blue-700"
}`}
>
{isLocked ? (
<LockClosedIcon className="mr-1 h-3 w-3" />
) : (
<LockOpenIcon className="mr-1 h-3 w-3" />
)}
{level}
</span>
<ImageWithFallback
src={thumbnail}
alt={title}
fill
className={clsx("object-contain", isLocked && "opacity-30")}
/>
{isLocked && (
<div className="absolute inset-0 z-30 flex items-center justify-center bg-black/40 text-white">
<div className="flex items-center gap-2 text-sm font-semibold">
<Lock className="h-4 w-4" />
Locked
</div>
</div>
)}
{isPassed && !isLocked && (
<div className="absolute bottom-3 right-3 z-20 flex items-center gap-2 rounded-full bg-green-600 px-3 py-1.5 text-xs font-medium text-white shadow">
<CheckCircle className="h-4 w-4" />
{`Passed${scorePercent ? ` • ${scorePercent}%` : ""}`}
</div>
)}
</Link>
<div className="p-6 sm:p-8">
<h3>
<Link
href={MODULE_PAGE_URL(slug)}
onClick={(e) => {
if (!isLocked) return;
e.preventDefault();
showErrorToast(
"This module is locked. Please complete previous modules to unlock it.",
id,
);
}}
className={clsx(
"mb-3 block text-xl font-bold text-black ",
{
"hover:text-primary dark:hover:text-primary":
!isLocked,
"dark:text-white": !isLocked,
"dark:text-muted-foreground": isLocked,
},
)}
>
{title}
</Link>
</h3>
<p
className={clsx(
"mb-5 line-clamp-3 text-sm text-body-color ",
{
"dark:text-body-color-dark": !isLocked,
"dark:text-muted-foreground": isLocked,
},
)}
>
{description}
</p>
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<svg
className="h-4 w-4 text-body-color"
fill="none"
stroke="currentColor"
strokeWidth={2}
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
/>
</svg>
<span>{estimatedTime}</span>
</div>
</div>
</div>
);
};