refactor: style icons with tailwind

Author: wackerow

src/components/SocialListItem.tsx

@@ -6,14 +6,15 @@ import {
   FaXTwitter,
   FaYoutube,
 } from "react-icons/fa6"
-import { Icon } from "@chakra-ui/react"
 
-const socialColors = {
-  reddit: "#ff4301",
-  twitter: "#1da1f2",
-  youtube: "#ff0000",
-  discord: "#7289da",
-  stackExchange: "#48a2da",
+import { cn } from "@/lib/utils/cn"
+
+const socialColorClasses = {
+  reddit: "text-[#ff4301]",
+  twitter: "text-[#1da1f2]",
+  youtube: "text-[#ff0000]",
+  discord: "text-[#7289da]",
+  stackExchange: "text-[#48a2da]",
 }
 
 const icons = {
@@ -25,28 +26,22 @@ const icons = {
   webpage: FaGlobe,
 }
 
-type SocialListItemProps = {
-  children?: React.ReactNode
+type SocialListItemProps = React.HTMLAttributes<HTMLDivElement> & {
   socialIcon: keyof typeof icons
-  color?: string
-  boxSize?: number
 }
 
 const SocialListItem = ({
   children,
   socialIcon,
-  color,
-  boxSize = 10,
-}: SocialListItemProps) => (
-  <div className="flex w-full items-center px-0 py-2">
-    <Icon
-      as={icons[socialIcon]}
-      pe={3}
-      boxSize={boxSize}
-      color={color || socialColors[socialIcon]}
-    />
-    <div className="font-normal italic">{children}</div>
-  </div>
-)
+  className,
+}: SocialListItemProps) => {
+  const Icon = icons[socialIcon]
+  return (
+    <div className={cn("flex w-full items-center px-0 py-2", className)}>
+      <Icon className={cn("size-10 pe-3", socialColorClasses[socialIcon])} />
+      <div className="font-normal italic">{children}</div>
+    </div>
+  )
+}
 
 export default SocialListItem