Add CardMultipleIcons component for displaying multiple icons (#66)

* feat: add CardMultipleIcons component for displaying multiple icons

* fix: correct border radius style in CardMultipleIcons component

* feat: add SVG icons for Discord and Telegram in assets

* refactor: biome

Author: BIA3IA

src/app/page.tsx

@@ -1,3 +1,8 @@
+import Image from "next/image"
+import { FiFacebook, FiGithub, FiInstagram, FiLinkedin } from "react-icons/fi"
+import discord from "@/assets/icons/discord.svg"
+import telegram from "@/assets/icons/telegram.svg"
+import { CardMultipleIcons } from "@/components/card-multiple-icons"
 import { Hero } from "@/components/home/hero"
 import { Materials } from "@/components/home/materials"
 
@@ -6,6 +11,18 @@ export default function Home() {
     <main className="w-full">
       <Hero />
       <Materials />
+      <div className="mx-auto w-fit py-12">
+        <CardMultipleIcons
+          icons={[
+            <Image key="telegram" src={telegram} alt="Telegram" />,
+            <FiInstagram key="instagram" />,
+            <FiLinkedin key="linkedin" />,
+            <FiFacebook key="facebook" />,
+            <Image key="discord" src={discord} alt="Discord" />,
+            <FiGithub key="github" />,
+          ]}
+        />
+      </div>
     </main>
   )
 }

src/assets/icons/discord.svg

@@ -0,0 +1,28 @@
+import * as React from "react"
+import { Glass } from "@/components/glass"
+import { cn } from "@/lib/utils"
+import type { CardMultipleIconsProps } from "./types"
+
+export function CardMultipleIcons({ icons, className }: CardMultipleIconsProps) {
+  const iconItems = React.Children.toArray(icons)
+
+  return (
+    <Glass
+      className={cn(
+        "inline-flex max-w-full overflow-hidden rounded-full border-white/50 bg-background-blur p-0 text-card-foreground",
+        className
+      )}
+    >
+      <div className="flex flex-wrap items-center gap-6 px-6 py-3">
+        {iconItems.map((icon) => (
+          <span
+            key={typeof icon === "object" && icon !== null && "key" in icon ? icon.key : undefined}
+            className="flex shrink-0 items-center justify-center text-2xl text-text-primary"
+          >
+            {icon}
+          </span>
+        ))}
+      </div>
+    </Glass>
+  )
+}

src/assets/icons/telegram.svg

@@ -0,0 +1,6 @@
+import type * as React from "react"
+
+export type CardMultipleIconsProps = {
+  icons: React.ReactNode[]
+  className?: string
+}