fix(contributor): circular icon hitbox (again) (#20)

* fix(contributors): social circles hitbox

* solid sucks

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

@@ -1,21 +1,42 @@
-import { JSX } from "solid-js";
+import { JSX, Match, Switch } from "solid-js";
 
 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";
+
+  const class_ = `bg-background-10 shadow-lg rounded-full flex items-center justify-center overflow-hidden ${props.class ?? ""}`;
+  const style = {
+    width: `${props.size}px`,
+    height: `${props.size}px`,
+  };
+
   return (
-    <div
-      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`,
-      }}
-    >
-      {props.children}
-    </div>
+    <Switch>
+      <Match when={BaseElement === "a"}>
+        <a
+          class={class_}
+          style={style}
+          href={props.href}
+          target={props.target}
+          rel={props.rel}
+        >
+          {props.children}
+        </a>
+      </Match>
+      <Match when={BaseElement === "div"}>
+        <div class={class_} style={style}>
+          {props.children}
+        </div>
+      </Match>
+    </Switch>
   );
 }