Display socials in consistent order

Author: hasparus

src/app/conf/2025/components/speaker-card.tsx

@@ -1,21 +1,15 @@
 import clsx from "clsx"
 import Image from "next-image-export-optimizer"
-import type { StaticImageData } from "next/image"
 
-import TwitterXIcon from "@/icons/twitter.svg?svgr"
-import LinkedInIcon from "@/icons/linkedin.svg?svgr"
 import { eventsColors } from "../utils"
 
 import { Anchor } from "../../_design-system/anchor"
 import { Tag } from "../../_design-system/tag"
 import { SchedSpeaker } from "../../2023/types"
-import {
-  SocialMediaIcon,
-  SocialMediaIconServiceType,
-} from "../../_components/speakers/social-media"
+import { StripesDecoration } from "../../_design-system/stripes-decoration"
+import { SocialIcon, SocialIconType } from "../../_design-system/social-icon"
 
 export interface SpeakerCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  imageUrl?: string | StaticImageData
   tags?: string[]
   isReturning?: boolean
   stripes?: string
@@ -33,13 +27,12 @@ function Stripes({ mask }: { mask?: string }) {
         WebkitMaskImage: mask,
       }}
     >
-      <div className="absolute inset-0 bg-gradient-to-b from-sec-dark/50 to-sec-light/50" />
+      <StripesDecoration oddClassName="absolute inset-0 bg-gradient-to-b from-sec-dark to-sec-light" />
     </div>
   )
 }
 
 export function SpeakerCard({
-  imageUrl,
   tags = [],
   className,
   speaker,
@@ -55,31 +48,29 @@ export function SpeakerCard({
       {...props}
     >
       <div className="flex gap-6 p-6">
-        {imageUrl && (
-          <div className="relative aspect-square size-[236px] shrink-0 overflow-hidden">
-            <div className="absolute inset-0 z-[1] bg-sec-light opacity-90 mix-blend-multiply" />
+        <SpeakerLinks speaker={speaker} className="absolute right-6 top-6" />
+        {speaker.avatar && (
+          <div className="relative aspect-square shrink-0 overflow-hidden">
+            <div className="absolute inset-0 z-[1] bg-sec-light mix-blend-multiply" />
             <Image
-              src={imageUrl}
+              src={speaker.avatar}
               alt=""
-              width={312}
-              height={312}
-              className="size-full object-cover saturate-[0.1] transition-transform"
-            />
-            <Stripes
-              // TODO!
-              mask={""}
+              width={176}
+              height={176}
+              className="size-full object-cover saturate-[.1] transition-transform"
             />
+            <Stripes mask="radial-gradient(ellipse at top left, hsl(var(--color-pri-base)) 0%, hsl(var(--color-pri-base)) 5%, transparent 40%, transparent, transparent 85%, black 100%)" />
           </div>
         )}
         <div className="flex flex-1 flex-col gap-2">
           <div className="flex flex-col gap-1">
             <h3 className="typography-body-lg">{speaker.name}</h3>
-            <p className="text-neu-700 typography-body-sm">
+            <p className="typography-body-sm text-neu-800">
               {[speaker.position, speaker.company].filter(Boolean).join(", ")}
             </p>
           </div>
           {speaker.about && (
-            <p className="text-neu-700 typography-body-sm">{speaker.about}</p>
+            <p className="typography-body-sm text-neu-800">{speaker.about}</p>
           )}
           {/* TODO: We'll have to collect it when fetching all sessions. */}
           {tags.length > 0 && (
@@ -91,36 +82,48 @@ export function SpeakerCard({
               ))}
             </div>
           )}
-          <div className="flex gap-4">
-            {speaker.socialurls?.length ? (
-              <div className="mt-0 text-[#765e5e]">
-                <div className="flex space-x-2">
-                  {speaker.socialurls.map(social => (
-                    <a
-                      key={social.url}
-                      href={social.url}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="flex items-center text-blk"
-                    >
-                      <SocialMediaIcon
-                        service={
-                          social.service.toLowerCase() as SocialMediaIconServiceType
-                        }
-                      />
-                    </a>
-                  ))}
-                </div>
-              </div>
-            ) : null}
-          </div>
         </div>
       </div>
       <Anchor
         href={`/conf/${year}/speakers/${speaker.username}`}
-        className="absolute inset-0"
+        className="absolute inset-0 z-[1] ring-inset ring-neu-400 hover:ring-1 dark:ring-neu-100"
         title={`See ${speaker.name.split(" ")[0]}'s sessions`}
       />
     </article>
   )
 }
+
+function SpeakerLinks({
+  speaker,
+  className,
+}: {
+  speaker: SchedSpeaker
+  className?: string
+}) {
+  const speakerUrls = SocialIconType.all
+    .map(social => speaker.socialurls.find(x => x.service === social))
+    .concat([{ service: "website", url: speaker.url || "" }])
+    .filter((x): x is Exclude<typeof x, undefined> => !!x?.url)
+    .slice(-3)
+
+  return (
+    <div
+      className={clsx(
+        "z-[3] flex divide-x divide-neu-200 border border-neu-200",
+        className,
+      )}
+    >
+      {speakerUrls.map(social => (
+        <a
+          key={social.url}
+          href={social.url}
+          target="_blank"
+          rel="noreferrer"
+          className="flex items-center p-2 text-neu-900"
+        >
+          <SocialIcon type={social.service.toLowerCase()} className="size-5" />
+        </a>
+      ))}
+    </div>
+  )
+}

src/app/conf/2025/components/top-minds/index.tsx

@@ -4,44 +4,61 @@ import Image from "next-image-export-optimizer"
 import type { StaticImageData } from "next/image"
 
 import TwitterIcon from "@/icons/twitter.svg"
+import LinkedInIcon from "@/icons/linkedin-filled.svg"
+
 import { Button } from "@/app/conf/_design-system/button"
 import { BECOME_A_SPEAKER_LINK } from "../../links"
 import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+import {
+  SocialIconType,
+  SocialIcon,
+  urlForUser,
+} from "@/app/conf/_design-system/social-icon"
 
 const previousConfSpeakers = {
   benjie: {
     name: "Benjie Gillam",
     title: "GraphQL TSC & Spec",
     src: "https://avatars.sched.co/b/99/18743846/avatar.jpg.320x320px.jpg",
-    twitter: "benjie",
-    linkedin: "benjiegillam",
+    socials: {
+      twitter: "benjie",
+      linkedin: "benjiegillam",
+    },
   },
   kewei: {
     name: "Kewei Qu",
     title: "Meta, Senior Staff Engineer",
     src: "https://avatars.sched.co/9/1a/18743864/avatar.jpg.320x320px.jpg",
-    twitter: "kewei_qu",
-    linkedin: "keweiqu",
+    socials: {
+      twitter: "kewei_qu",
+      linkedin: "keweiqu",
+    },
   },
   donna: {
     name: "Donna Zhou",
     title: "Atlassian, GraphQL Java",
     src: "https://avatars.sched.co/0/1d/18743879/avatar.jpg.320x320px.jpg?e1f",
-    linkedin: "donnazhou",
+    socials: {
+      linkedin: "donnazhou",
+    },
   },
   uri: {
     name: "Uri Goldshtein",
     title: "The Guild, Founder",
     src: "https://avatars.sched.co/8/2b/14900013/avatar.jpg.320x320px.jpg?9f1",
-    twitter: "UriGoldshtein",
-    linkedin: "urigo",
+    socials: {
+      twitter: "UriGoldshtein",
+      linkedin: "urigo",
+    },
   },
   alessia: {
     name: "Alessia Bellisario",
     title: "Apollo, Staff Engineer",
     src: "https://avatars.sched.co/a/c6/18743837/avatar.jpg.320x320px.jpg?847",
-    twitter: "alessbell",
-    linkedin: "alessiabellisario",
+    socials: {
+      twitter: "alessbell",
+      linkedin: "alessiabellisario",
+    },
   },
 }
 
@@ -63,30 +80,30 @@ export default function TopMindsSection({
       {...rest}
     >
       <div className="flex grid-cols-2 flex-wrap [@media(444px<width<743px)]:grid [@media(width<=444px)]:flex-col [@media(width<=743px)]:justify-center [@media(width>=970px)]:*:border-b-0">
-        <h3 className="mr-auto flex w-full grow text-pretty pb-6 pr-6 typography-h2 [@media(width>857px)]:basis-0">
+        <h3 className="typography-h2 mr-auto flex w-full grow text-pretty pb-6 pr-6 [@media(width>857px)]:basis-0">
           Meet the top industry minds
         </h3>
-        <SpeakerCard
+        <TopMindCard
           {...previousConfSpeakers.benjie}
           stripes="linear-gradient(80deg, hsl(var(--color-pri-base)) 0%, hsl(var(--color-pri-base)) 5%, transparent 40%, transparent)"
         />
-        <SpeakerCard
+        <TopMindCard
           {...previousConfSpeakers.kewei}
           className="[@media(width<=742px)]:border-l"
           stripes="radial-gradient(circle at bottom right, hsl(var(--color-pri-base)) 0%, hsl(var(--color-pri-base)) 10%, transparent 40%, transparent)"
         />
         <div className="flex grow border-sec-dark [@media(width<970px)]:contents [@media(width>=970px)]:border-t [@media(width>=970px)]:*:border-t-0">
-          <SpeakerCard
+          <TopMindCard
             {...previousConfSpeakers.donna}
             className="[@media(744px<=width<=970px)]:first-of-type:border-l-0"
             stripes="radial-gradient(ellipse at top left, hsl(var(--color-pri-base)) 0%, hsl(var(--color-pri-base)) 5%, transparent 40%, transparent, transparent 85%, black 100%)"
           />
-          <SpeakerCard
+          <TopMindCard
             {...previousConfSpeakers.uri}
             className="[@media(639px<=width<=970px)]:border-l"
             stripes="linear-gradient(-40deg, hsl(var(--color-pri-base)) 0%, hsl(var(--color-pri-base)) 5%, transparent 40%, transparent)"
           />
-          <SpeakerCard
+          <TopMindCard
             {...previousConfSpeakers.alessia}
             className="[@media(width<744px)]:border-l"
             stripes="radial-gradient(circle at top left, transparent 0%, transparent 65%, black 90%)"
@@ -108,23 +125,23 @@ export default function TopMindsSection({
   )
 }
 
-function SpeakerCard({
-  name,
-  title,
-  src,
-  twitter,
-  linkedin,
-  className,
-  stripes,
-}: {
+export interface TopMindCardProps {
   name: string
   title: string
   src: string | StaticImageData
-  twitter?: string
-  linkedin?: string
   className?: string
   stripes?: string
-}) {
+  socials: Partial<Record<SocialIconType, string>>
+}
+
+function TopMindCard({
+  name,
+  title,
+  src,
+  className,
+  stripes,
+  socials,
+}: TopMindCardProps) {
   return (
     <article
       className={clsx(
@@ -146,51 +163,28 @@ function SpeakerCard({
       <div className="flex flex-1 items-stretch border-t border-sec-dark">
         <div className="flex grow flex-col justify-center gap-1 p-3 sm:h-[80px]">
           <h4 className="typography-body-md">{name}</h4>
-          <p className="text-neu-700 typography-body-xs">{title}</p>
+          <p className="typography-body-xs text-neu-700">{title}</p>
         </div>
-        {(linkedin || twitter) && (
-          <div className="flex border-l border-sec-dark max-sm:divide-x sm:flex-col sm:items-center sm:divide-y sm:border-l">
-            {linkedin && (
+        <div className="flex border-l border-sec-dark max-sm:divide-x sm:flex-col sm:items-center sm:divide-y sm:border-l">
+          {SocialIconType.all.map(type => {
+            if (!socials[type]) return null
+            return (
               <a
-                href={`https://www.linkedin.com/in/${linkedin}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex grow items-center justify-center p-4 transition-colors hover:bg-neu-900/10 hover:text-neu-700 sm:p-2"
-              >
-                <LinkedInIcon />
-              </a>
-            )}
-            {twitter && (
-              <a
-                href={`https://x.com/${twitter}`}
+                href={urlForUser(type, socials[type])}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="flex grow items-center justify-center border-sec-dark p-4 transition-colors hover:bg-neu-900/10 hover:text-neu-700 sm:p-2"
               >
-                <TwitterIcon className="size-6" />
+                <SocialIcon type={type} className="size-6" />
               </a>
-            )}
-          </div>
-        )}
+            )
+          })}
+        </div>
       </div>
     </article>
   )
 }
 
-function LinkedInIcon(props: HTMLAttributes<SVGElement>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      {...props}
-    >
-      <path d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z" />
-    </svg>
-  )
-}
-
 function Stripes({ mask }: { mask?: string }) {
   return (
     <div

src/app/conf/_components/speakers/social-media.tsx

@@ -1,17 +1,27 @@
-import { TwitterIcon, FacebookIcon, LinkedInIcon, InstagramIcon } from "@/icons"
+import {
+  TwitterIcon,
+  FacebookIcon,
+  LinkedInIcon,
+  InstagramIcon,
+  GlobeIcon,
+} from "@/icons"
+import clsx from "clsx"
 
 export type SocialMediaIconServiceType =
   | "twitter"
   | "linkedin"
   | "facebook"
   | "instagram"
+  | "website"
 
 export const SocialMediaIcon = ({
   service,
+  className,
 }: {
   service: SocialMediaIconServiceType
+  className?: string
 }) => {
-  const classes = "h-7 hover:text-primary transition-colors"
+  const classes = clsx("h-7 hover:text-primary transition-colors", className)
 
   switch (service) {
     case "twitter":
@@ -22,6 +32,8 @@ export const SocialMediaIcon = ({
       return <FacebookIcon className={classes} />
     case "instagram":
       return <InstagramIcon className={classes} />
+    case "website":
+      return <GlobeIcon className={classes} />
     default:
       throw new Error(`Can't found social icon for "${service}" service.`)
   }