Add basic user profile details

cesko-digital · Jul 4, 2024 · 7db4fc2 · 7db4fc2
1 parent 2989336
commit 7db4fc2
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 16 deletions.
diff --git a/app/people/[id]/page.tsx b/app/people/[id]/page.tsx
@@ -1,8 +1,11 @@
+import Image from "next/image";
 import { notFound } from "next/navigation";
 
 import { Breadcrumbs } from "~/components/Breadcrumbs";
+import { TextPill } from "~/components/TextPill";
 import { getUserProfile } from "~/src/data/user-profile";
 import { Route } from "~/src/routing";
+import { skillsToHashtags } from "~/src/skills/skills";
 
 type Params = {
   id: string;
@@ -18,13 +21,36 @@ async function Page({ params }: Props) {
     // TBD: Maybe the profile is private?
     notFound();
   }
+  const avatarUrl =
+    profile.slackAvatarUrl ??
+    "https://data.cesko.digital/people/generic-profile.jpg";
   return (
     <main className="m-auto max-w-content px-7 py-20">
       <Breadcrumbs
         path={[{ label: "Lidé", path: Route.people }]}
         currentPage={profile.name}
       />
-      <h1 className="typo-title mb-10 mt-7">{profile.name}</h1>
+      <div className="mt-10 grid grid-cols-4 gap-7">
+        <div className="flex flex-col items-center gap-10">
+          <Image
+            src={avatarUrl}
+            className="rounded-full bg-pebble"
+            width={200}
+            height={200}
+            alt=""
+          />
+          <a
+            href={`mailto:${profile.contactEmail ?? profile.email}`}
+            className="btn-primary"
+          >
+            Napsat mail
+          </a>
+        </div>
+        <div className="col-span-3 pt-2">
+          <h1 className="typo-title mb-4">{profile.name}</h1>
+          <div>{skillsToHashtags(profile.skills)}</div>
+        </div>
+      </div>
     </main>
   );
 }

diff --git a/app/people/page.tsx b/app/people/page.tsx
@@ -1,7 +1,7 @@
 import { Breadcrumbs } from "~/components/Breadcrumbs";
 import { UserProfileCard } from "~/components/MemberCard";
 import { getAllUserProfiles } from "~/src/data/user-profile";
-import { unique } from "~/src/utils";
+import { skillsToHashtags } from "~/src/skills/skills";
 
 async function Page() {
   const profiles = await getAllUserProfiles("Public Profiles");
@@ -19,25 +19,12 @@ async function Page() {
           <UserProfileCard
             key={profile.id}
             profile={profile}
-            label={dressSkills(profile.skills)}
+            label={skillsToHashtags(profile.skills)}
           />
         ))}
       </div>
     </main>
   );
 }
 
-const dressSkills = (skills: string) => {
-  const uppercaseFirst = (s: string) =>
-    s.charAt(0).toLocaleUpperCase() + s.slice(1);
-  const categories = skills
-    .split(/;\s*/)
-    .map((s) => s.split(/\s*\/\s*/).shift())
-    .map((c) => c?.split(" ").map(uppercaseFirst).join(""));
-  return unique(categories)
-    .sort()
-    .map((c) => "#" + c)
-    .join(" ");
-};
-
 export default Page;
diff --git a/src/skills/skills.ts b/src/skills/skills.ts
@@ -1,5 +1,7 @@
 import { undef, union } from "typescript-json-decoder";
 
+import { unique } from "~/src/utils";
+
 /** All available skill levels we work with */
 export const SKILL_LEVELS = ["junior", "medior", "senior", "mentor"] as const;
 
@@ -138,3 +140,16 @@ export function decodeSkillSelection(input: string): SkillSelection {
       .reduce(addSkill, {})
   );
 }
+
+export const skillsToHashtags = (skills: string) => {
+  const uppercaseFirst = (s: string) =>
+    s.charAt(0).toLocaleUpperCase() + s.slice(1);
+  const categories = skills
+    .split(/;\s*/)
+    .map((s) => s.split(/\s*\/\s*/).shift())
+    .map((c) => c?.split(" ").map(uppercaseFirst).join(""));
+  return unique(categories)
+    .sort()
+    .map((c) => "#" + c)
+    .join(" ");
+};