add option merge

src/components/Socials.tsx

 import { graphql, useStaticQuery } from "gatsby"
 import React from "react"
 import Logo from "./core/Logo"
+import { twMerge } from "tailwind-merge"
 
 interface ISocials {
     layout?: string
     name: string
     logo: any
     url: string
+    className: string
+    option?: any
 }
 
 const Socials = (props: ISocials) => {
@@ -38,23 +41,33 @@ const Socials = (props: ISocials) => {
 
     const dataSocials = dataDirectus.directus.socials
 
-    const { layout } = props
+    const { layout, className, option } = props
 
     return (
-        <div className={`flex ${layout == "col" ? "w-8 flex-col" : ""} gap-2`}>
+        <div
+            className={twMerge(
+                `flex ${layout == "col" ? "w-8 flex-col" : ""} gap-2`,
+                option.main
+            )}
+        >
             {dataSocials.map((item: any, key: number) => {
                 return (
                     <div
-                        className={`tooltip ${
-                            layout == "row" ? "tooltip-top" : "tooltip-right"
-                        } `}
+                        className={twMerge(
+                            `tooltip ${
+                                layout == "row"
+                                    ? "tooltip-top"
+                                    : "tooltip-right"
+                            } `,
+                            option.social
+                        )}
                         data-tip={item.name}
                         key={key}
                     >
                         <Logo
                             image={item.logo?.imageFile}
                             url={item.url}
-                            className={"h-7 w-7"}
+                            className={twMerge("h-7 w-7 ", option.logo)}
                         />
                     </div>
                 )