[web] interviews/marketing: add job title to solutions section

apps/web/src/components/interviews/marketing/InterviewsMarketingSolutionsByExInterviewersSection.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { useInView } from 'framer-motion';
 import type { ReactNode } from 'react';
 import { useEffect, useRef, useState } from 'react';
+import { RiAmazonFill, RiMetaFill } from 'react-icons/ri';
 
 import SideNavigation from '~/components/common/SideNavigation';
 import TypingString from '~/components/common/TypingString';
@@ -131,7 +132,9 @@ function getAnnotationData(highlightId: string | null):
         contents: (
           <CodeAnnotationContents
             className="w-[200px]"
-            contents="Reduce is suitable since we want to iterate through every element and consolidate them"
+            contents="Reduce can be used since we want to iterate through every element and consolidate them"
+            icon={RiMetaFill}
+            jobTitle="Ex-Meta Engineer"
             name="Yangshun"
           />
         ),
@@ -140,12 +143,14 @@ function getAnnotationData(highlightId: string | null):
     }
     case 'flatten-ii': {
       return {
-        alignment: 'end',
+        alignment: 'start',
         className: greenClassName,
         contents: (
           <CodeAnnotationContents
-            className="w-[150px]"
+            className="w-[200px]"
             contents="Recursively call flatten() on nested arrays"
+            icon={RiAmazonFill}
+            jobTitle="Ex-Amazon Engineer"
             name="Zhenghao"
           />
         ),
@@ -161,6 +166,8 @@ function getAnnotationData(highlightId: string | null):
           <CodeAnnotationContents
             className="w-[300px]"
             contents="Handle primitive and null-ish values first by returning directly"
+            icon={RiMetaFill}
+            jobTitle="Ex-Meta Engineer"
             name="Yangshun"
           />
         ),
@@ -175,6 +182,8 @@ function getAnnotationData(highlightId: string | null):
           <CodeAnnotationContents
             className="w-[300px]"
             contents="Recursively handle arrays by calling deepClone() on each item into a new array"
+            icon={RiAmazonFill}
+            jobTitle="Ex-Amazon Engineer"
             name="Zhenghao"
           />
         ),
@@ -189,6 +198,8 @@ function getAnnotationData(highlightId: string | null):
           <CodeAnnotationContents
             className="w-[300px]"
             contents="Recursively handle objects by calling deepClone() on each entry into a new object"
+            icon={RiMetaFill}
+            jobTitle="Ex-Meta Engineer"
             name="Yangshun"
           />
         ),
@@ -204,6 +215,8 @@ function getAnnotationData(highlightId: string | null):
           <CodeAnnotationContents
             className="w-[300px]"
             contents="Conditionally use the appropriate classname"
+            icon={RiMetaFill}
+            jobTitle="Ex-Meta Engineer"
             name="Yangshun"
           />
         ),
@@ -218,6 +231,8 @@ function getAnnotationData(highlightId: string | null):
           <CodeAnnotationContents
             className="w-[300px]"
             contents="Be sure to add aria-hidden to hide icons from screen readers"
+            icon={RiAmazonFill}
+            jobTitle="Ex-Amazon Engineer"
             name="Zhenghao"
           />
         ),
@@ -232,9 +247,13 @@ function CodeAnnotationContents({
   className,
   contents,
   name,
+  icon: Icon,
+  jobTitle,
 }: Readonly<{
   className: string;
   contents: string;
+  icon: (props: React.ComponentProps<'svg'>) => JSX.Element;
+  jobTitle: string;
   name: string;
 }>) {
   const [showContents, setShowContents] = useState(false);
@@ -247,9 +266,16 @@ function CodeAnnotationContents({
 
   return (
     <div className={clsx('flex min-w-[150px] flex-col gap-0.5', className)}>
-      <Text color="light" size="body3" weight="medium">
-        {name}
-      </Text>
+      <div className="flex items-center gap-1">
+        <Text color="light" size="body3" weight="medium">
+          {name}
+        </Text>
+        &middot;
+        <Icon className="inline w-3.5" />
+        <Text color="secondary" size="body3">
+          {jobTitle}
+        </Text>
+      </div>
       {showContents && (
         <Text
           className="whitespace-normal text-neutral-300"