From 59ba9af6da8d040fb343b7c46514e8007d3a7a24 Mon Sep 17 00:00:00 2001
From: manoa <amanoa@neogeo.fr>
Date: Tue, 25 Jul 2023 15:01:12 +0300
Subject: [PATCH] add option merge
---
src/components/Socials.tsx | 25 +++++++++++++++++++------
1 file changed, 19 insertions(+), 6 deletions(-)
diff --git a/src/components/Socials.tsx b/src/components/Socials.tsx
index e44f955..0b41df9 100644
--- a/src/components/Socials.tsx
+++ b/src/components/Socials.tsx
@@ -1,12 +1,15 @@
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>
)
--
GitLab