From eef734abfdba6d04082017920b47002c2f11917f Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 20 Apr 2024 13:06:27 +0100
Subject: [PATCH] Add alert for skill profile

---
 .../UpdateProfile/SkillProfileAlert.tsx       | 48 +++++++++++++++++++
 .../UpdateProfile/UpdatePublicProfileForm.tsx | 48 +++++++++++--------
 2 files changed, 76 insertions(+), 20 deletions(-)
 create mode 100644 src/components/UpdateProfile/SkillProfileAlert.tsx

diff --git a/src/components/UpdateProfile/SkillProfileAlert.tsx b/src/components/UpdateProfile/SkillProfileAlert.tsx
new file mode 100644
index 000000000..978553b52
--- /dev/null
+++ b/src/components/UpdateProfile/SkillProfileAlert.tsx
@@ -0,0 +1,48 @@
+import { CheckCircle, FileBadge } from 'lucide-react';
+
+const ideas = [
+  'Add a link to your profile in your social media bio',
+  'Include your profile link in your resume to showcase your skills',
+  'Add a link to your profile in your email signature',
+  'Showcase your skills in your GitHub profile',
+  'Share your profile with potential employers',
+];
+
+export function SkillProfileAlert() {
+  return (
+    <div className="relative mb-5 rounded-lg bg-yellow-200 px-3 py-3 text-sm text-yellow-800">
+      <FileBadge className="absolute hidden sm:block bottom-3 right-3 h-20 w-20 stroke-2 text-yellow-500 opacity-50" />
+
+      <h2 className="mb-1 text-base font-semibold">
+        Announcing Skill Profiles!{' '}
+      </h2>
+      <p className="text-sm">
+        Create your skill profile to showcase your skills or learning progress.
+        Here are some of the ways you can use your skill profile:
+      </p>
+
+      <div className="my-3 ml-2 flex flex-col gap-1 sm:ml-3">
+        {ideas.map((idea) => (
+          <p
+            key={idea}
+            className="flex flex-row items-start gap-1.5 sm:items-center"
+          >
+            <CheckCircle className="relative top-[3px] h-3.5 w-3.5 flex-shrink-0 stroke-[2.5] sm:top-0" />
+            <span>{idea}</span>
+          </p>
+        ))}
+      </div>
+
+      <p className="text-sm">
+        Make sure to mark your expertise{' '}
+        <a
+          href="/roadmaps"
+          target="_blank"
+          className="font-semibold underline underline-offset-2"
+        >
+          in the roadmaps.
+        </a>
+      </p>
+    </div>
+  );
+}
diff --git a/src/components/UpdateProfile/UpdatePublicProfileForm.tsx b/src/components/UpdateProfile/UpdatePublicProfileForm.tsx
index b92467e39..084c98f76 100644
--- a/src/components/UpdateProfile/UpdatePublicProfileForm.tsx
+++ b/src/components/UpdateProfile/UpdatePublicProfileForm.tsx
@@ -8,12 +8,20 @@ import type {
   UserDocument,
 } from '../../api/user';
 import { SelectionButton } from '../RoadCard/SelectionButton';
-import { ArrowUpRight, Eye, EyeOff } from 'lucide-react';
+import {
+  ArrowUpRight,
+  CheckCircle,
+  Eye,
+  EyeOff,
+  FileBadge,
+  Trophy,
+} from 'lucide-react';
 import { useToast } from '../../hooks/use-toast';
 import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx';
 import { VisibilityDropdown } from './VisibilityDropdown.tsx';
 import { ProfileUsername } from './ProfileUsername.tsx';
 import UploadProfilePicture from './UploadProfilePicture.tsx';
+import { SkillProfileAlert } from './SkillProfileAlert.tsx';
 
 type RoadmapType = {
   id: string;
@@ -202,11 +210,11 @@ export function UpdatePublicProfileForm() {
         <CreateRoadmapModal onClose={() => setIsCreatingRoadmap(false)} />
       )}
 
+      <SkillProfileAlert />
+
       <div className="mb-8 flex flex-col justify-between gap-2 sm:mb-1 sm:flex-row">
         <div className="flex flex-grow flex-row items-center gap-2 sm:items-center">
-          <h3 className="mr-1 text-xl font-bold sm:text-3xl">
-            Personal Profile
-          </h3>
+          <h3 className="mr-1 text-xl font-bold sm:text-3xl">Skill Profile</h3>
           {publicProfileUrl && (
             <a
               href={publicProfileUrl}
@@ -224,7 +232,7 @@ export function UpdatePublicProfileForm() {
         />
       </div>
       <p className="mb-8 mt-2 hidden text-sm text-gray-400 sm:mt-0 sm:block sm:text-base">
-        Set up your profile to showcase your skills.
+        Create your skill profile to showcase your skills.
       </p>
 
       <UploadProfilePicture
@@ -283,21 +291,21 @@ export function UpdatePublicProfileForm() {
             value={email}
           />
           <div className="flex items-center justify-end gap-2 rounded-md text-xs text-gray-400">
-          <div className="flex select-none items-center justify-end gap-2 rounded-md text-xs text-gray-400">
-            <input
-              type="checkbox"
-              name="isEmailVisible"
-              id="isEmailVisible"
-              checked={isEmailVisible}
-              onChange={(e) => setIsEmailVisible(e.target.checked)}
-            />
-            <label
-              htmlFor="isEmailVisible"
-              className="flex-grow cursor-pointer py-1.5"
-            >
-              Show my email on profile
-            </label>
-          </div>
+            <div className="flex select-none items-center justify-end gap-2 rounded-md text-xs text-gray-400">
+              <input
+                type="checkbox"
+                name="isEmailVisible"
+                id="isEmailVisible"
+                checked={isEmailVisible}
+                onChange={(e) => setIsEmailVisible(e.target.checked)}
+              />
+              <label
+                htmlFor="isEmailVisible"
+                className="flex-grow cursor-pointer py-1.5"
+              >
+                Show my email on profile
+              </label>
+            </div>
           </div>
         </div>