Skip to content

Commit 63870b9

Browse files
yyyortyyyort
authored
Merge pull request #381 from CodebilityDev/dev
update for aug 1st and 2nd week
2 parents 5fbbb40 + d0cb9ca commit 63870b9

26 files changed

Lines changed: 1239 additions & 1060 deletions

‎apps/codebility/app/home/(dashboard)/_components/DashboardCertificate.tsx‎

Lines changed: 46 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
11
import { useRef } from "react";
22
import Image from "next/image";
3-
import { Button } from "@/components/ui/button";
43
import { useUserStore } from "@/store/codev-store";
54
import { BookDown } from "lucide-react";
5+
import certificateSvg from "@/public/assets/ssvgs/certificate.svg";
66

77
import Certificate, {
88
CertificateProps,
99
handleDownload,
1010
} from "./DashboardDownloadCertificate";
11+
import { cn } from "@codevs/ui";
12+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@codevs/ui/tooltip";
13+
import { CertificateIcon, CertificateOffIcon } from "./DashboardCertificateIcons";
14+
import { Button } from "@codevs/ui/button";
15+
16+
function hasLevelTwoBadge(level: Record<string, number> | undefined): boolean {
17+
const validLevels = Object.entries(level!).filter(
18+
([, levelValue]) => levelValue > 0,
19+
);
20+
21+
return validLevels.some(([, levelValue]) => levelValue >= 2);
22+
}
1123

1224
const DashboardCertificate = () => {
1325
const { user, userLevel } = useUserStore();
@@ -103,9 +115,11 @@ const DashboardCertificate = () => {
103115
}
104116
})();
105117

118+
const isCertificateUnlocked = hasLevelTwoBadge(user?.level);
119+
106120
return (
107121
<>
108-
<div className="absolute left-4 top-4">
122+
<div className="absolute left-4 top-4 z-10">
109123
<div
110124
style={{
111125
position: "absolute",
@@ -114,34 +128,45 @@ const DashboardCertificate = () => {
114128
width: "1000px",
115129
height: "700px",
116130
overflow: "hidden",
117-
zIndex: -1,
131+
visibility: "hidden",
132+
pointerEvents: "none",
118133
}}
134+
aria-hidden="true"
119135
>
120136
<Certificate {...certData} ref={certRef} />
121137
</div>
122-
<Button
123-
className="md:p-15 md:w-15 h-6 w-10 p-2"
124-
onClick={() => hasLevelTwoBadge(user?.level) && handleDownload(certRef, certData.name)}
125-
disabled={!hasLevelTwoBadge(user?.level)}
126-
title={
127-
hasLevelTwoBadge(user?.level)
128-
? "Download your certificate"
129-
: "Complete more projects to unlock your certificate"
130-
}
131-
>
132-
<BookDown className={hasLevelTwoBadge(user?.level) ? "" : "opacity-50"} />
133-
</Button>
138+
<Tooltip>
139+
<TooltipTrigger asChild>
140+
<Button
141+
size="icon"
142+
variant="ghost"
143+
className={cn(
144+
"rounded-full inline-flex items-center justify-center",
145+
"transition-colors duration-200",
146+
isCertificateUnlocked
147+
? "hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
148+
: "cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-900"
149+
)}
150+
onClick={() => isCertificateUnlocked && handleDownload(certRef, certData.name)}
151+
>
152+
{isCertificateUnlocked ? (
153+
<CertificateIcon className="h-6 w-6 text-[#9747FF]" />
154+
) : (
155+
<CertificateOffIcon className="h-6 w-6 opacity-50" />
156+
)}
157+
</Button>
158+
</TooltipTrigger>
159+
<TooltipContent side="bottom" align="start">
160+
{isCertificateUnlocked
161+
? "Download your certificate"
162+
: "Reach level 2 to unlock the certificate"}
163+
</TooltipContent>
164+
</Tooltip>
134165
</div>
135166
</>
136167
);
137168
};
138169

139-
function hasLevelTwoBadge(level: Record<string, number> | undefined): boolean {
140-
const validLevels = Object.entries(level!).filter(
141-
([, levelValue]) => levelValue > 0,
142-
);
143170

144-
return validLevels.some(([, levelValue]) => levelValue >= 2);
145-
}
146171

147172
export default DashboardCertificate;

‎apps/codebility/app/home/(dashboard)/_components/DashboardCertificateIcons.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { cn } from "@codevs/ui";
2+
3+
export function CertificateIcon({ className }: { className?: string }) {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width="24"
8+
height="24"
9+
viewBox="0 0 24 24"
10+
fill="none"
11+
stroke="currentColor"
12+
strokeWidth="1"
13+
strokeLinecap="round"
14+
strokeLinejoin="round"
15+
className={cn('icon icon-tabler icons-tabler-outline icon-tabler-certificate', className)}
16+
style={{ pointerEvents: 'none' }}
17+
>
18+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
19+
<path d="M15 15m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
20+
<path d="M13 17.5v4.5l2 -1.5l2 1.5v-4.5" />
21+
<path d="M10 19h-5a2 2 0 0 1 -2 -2v-10c0 -1.1 .9 -2 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -1 1.73" />
22+
<path d="M6 9l12 0" />
23+
<path d="M6 12l3 0" />
24+
<path d="M6 15l2 0" />
25+
</svg>
26+
);
27+
}
28+
29+
export function CertificateOffIcon({ className }: { className?: string }) {
30+
return (
31+
<svg
32+
xmlns="http://www.w3.org/2000/svg"
33+
width="24"
34+
height="24"
35+
viewBox="0 0 24 24"
36+
fill="none"
37+
stroke="currentColor"
38+
strokeWidth="1"
39+
strokeLinecap="round"
40+
strokeLinejoin="round"
41+
className={cn('icon icon-tabler icons-tabler-outline icon-tabler-certificate-off', className)}
42+
style={{ pointerEvents: 'none' }}
43+
>
44+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
45+
<path d="M12.876 12.881a3 3 0 0 0 4.243 4.243m.588 -3.42a3.012 3.012 0 0 0 -1.437 -1.423" />
46+
<path d="M13 17.5v4.5l2 -1.5l2 1.5v-4.5" />
47+
<path d="M10 19h-5a2 2 0 0 1 -2 -2v-10c0 -1.1 .9 -2 2 -2m4 0h10a2 2 0 0 1 2 2v10" />
48+
<path d="M6 9h3m4 0h5" />
49+
<path d="M6 12h3" />
50+
<path d="M6 15h2" />
51+
<path d="M3 3l18 18" />
52+
</svg>
53+
);
54+
}
55+

0 commit comments

Comments
 (0)