fix(contributors): social circles hitbox (#17)

Author: TheDevMinerTV

src/components/contributors/Card.tsx

@@ -508,28 +508,28 @@ export const Card: ParentComponent<CardProps> = (props) => {
                   {Object.entries(socials).map(([key, value], i) => {
                     if (!value) return null;
                     return (
-                      <CircularIcon size={30}>
-                        <a
-                          href={value}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          {key === "github" && <GithubIcon size={20} />}
-                          {key === "twitter" && <TwitterIcon size={20} />}
-                          {key === "bluesky" && <BlueskyIcon size={18} />}
-                          {key === "instagram" && <InstagramIcon size={22} />}
-                          {key === "youtube" && <YoutubeIcon size={22} />}
-                          {key === "twitch" && (
-                            <TwitchIcon size={18} class="mt-[2px] mr-[2px]" />
-                          )}
-                          {key === "kofi" && <KofiIcon size={20} />}
-                          {key === "discord" && <DiscordIcon size={20} />}
-                          {key === "tiktok" && <TiktokIcon size={20} />}
-                          {key === "printables" && <PrintablesIcon size={18} />}
-                          {key === "steam" && <SteamIcon size={18} />}
-                          {key === "matrix" && <MatrixIcon size={16} />}
-                          {key === "website" && <WebsiteIcon size={20} />}
-                        </a>
+                      <CircularIcon
+                        size={30}
+                        element="a"
+                        href={value}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {key === "github" && <GithubIcon size={20} />}
+                        {key === "twitter" && <TwitterIcon size={20} />}
+                        {key === "bluesky" && <BlueskyIcon size={18} />}
+                        {key === "instagram" && <InstagramIcon size={22} />}
+                        {key === "youtube" && <YoutubeIcon size={22} />}
+                        {key === "twitch" && (
+                          <TwitchIcon size={18} class="mt-[2px] mr-[2px]" />
+                        )}
+                        {key === "kofi" && <KofiIcon size={20} />}
+                        {key === "discord" && <DiscordIcon size={20} />}
+                        {key === "tiktok" && <TiktokIcon size={20} />}
+                        {key === "printables" && <PrintablesIcon size={18} />}
+                        {key === "steam" && <SteamIcon size={18} />}
+                        {key === "matrix" && <MatrixIcon size={16} />}
+                        {key === "website" && <WebsiteIcon size={20} />}
                       </CircularIcon>
                     );
                   })}

src/components/contributors/CircularIcon.tsx

@@ -4,18 +4,27 @@ type CircularIconProps = {
   size: number;
   children: JSX.Element;
   class?: string;
+  element?: "div" | "a";
+  href?: string;
+  target?: string;
+  rel?: string;
 };
 
 export default function CircularIcon(props: CircularIconProps) {
+  const BaseElement = props.element || "div";
+
   return (
-    <div
+    <BaseElement
       class={`bg-background-10 shadow-lg rounded-full flex items-center justify-center overflow-hidden ${props.class ? `${props.class}` : ""}`}
       style={{
         width: `${props.size}px`,
         height: `${props.size}px`,
       }}
+      href={props.href}
+      target={props.target}
+      rel={props.rel}
     >
       {props.children}
-    </div>
+    </BaseElement>
   );
 }