142 lines
4.3 KiB
TypeScript
142 lines
4.3 KiB
TypeScript
import Link from "next/link";
|
|
import {
|
|
ChevronRightIcon,
|
|
FacebookLandingIcon,
|
|
FbIcon,
|
|
IgIcon,
|
|
InstagramLandingIcon,
|
|
TiktokLandingIcon,
|
|
TtIcon,
|
|
TwitterIcon,
|
|
XLandingIcon,
|
|
YoutubeLandingIcon,
|
|
YtIcon,
|
|
} from "../icons";
|
|
import TwitterWidget from "../ui/social-media/twitter";
|
|
import InstagramWidget from "../ui/social-media/instagram";
|
|
import FacebookWidget from "../ui/social-media/facebook";
|
|
import YoutubeWidget from "../ui/social-media/youtube";
|
|
import { useState } from "react";
|
|
import { Button } from "@nextui-org/button";
|
|
|
|
export default function MediaSocial() {
|
|
// const [limitedData, setLimitedData] = useState<any>([]);
|
|
const [selectedPlatform, setSelectedPlatform] = useState("x");
|
|
|
|
return (
|
|
<div className="space-y-5 md:space-y-7 bg-white text-black rounded-lg ">
|
|
<p className="text-xl border-b-3 border-red-500 py-2 w-fit font-semibold">
|
|
MediaSocial
|
|
</p>
|
|
|
|
<div className="flex flex-row gap-3">
|
|
<Button
|
|
className="min-w-[60px]"
|
|
variant={selectedPlatform === "x" ? "solid" : "flat"}
|
|
onClick={() => setSelectedPlatform("x")}
|
|
>
|
|
<div className="flex items-center">
|
|
<XLandingIcon size={16} />
|
|
<p
|
|
className={`pl-2 text-sm ${
|
|
selectedPlatform === "x"
|
|
? "font-semibold"
|
|
: "text-slate-600 dark:text-slate-50"
|
|
}`}
|
|
>
|
|
X
|
|
</p>
|
|
</div>
|
|
</Button>
|
|
<Button
|
|
className="min-w-[60px]"
|
|
variant={selectedPlatform === "instagram" ? "solid" : "flat"}
|
|
onClick={() => setSelectedPlatform("instagram")}
|
|
>
|
|
<div className="flex items-center">
|
|
<InstagramLandingIcon />
|
|
<p
|
|
className={`pl-2 text-sm ${
|
|
selectedPlatform === "instagram"
|
|
? "font-semibold"
|
|
: "text-slate-600 dark:text-slate-50"
|
|
}`}
|
|
>
|
|
Instagram
|
|
</p>
|
|
</div>
|
|
</Button>
|
|
{/* <Button
|
|
className="min-w-[60px]"
|
|
variant={selectedPlatform === "facebook" ? "solid" : "flat"}
|
|
onClick={() => setSelectedPlatform("facebook")}
|
|
>
|
|
<div className="flex items-center">
|
|
<FacebookLandingIcon />
|
|
<p
|
|
className={`pl-2 text-sm ${
|
|
selectedPlatform === "facebook"
|
|
? "font-semibold"
|
|
: "text-slate-600 dark:text-slate-50"
|
|
}`}
|
|
>
|
|
Facebook
|
|
</p>
|
|
</div>
|
|
</Button> */}
|
|
{/* <Button
|
|
className="min-w-[60px]"
|
|
variant={selectedPlatform === "tiktok" ? "solid" : "flat"}
|
|
onClick={() => setSelectedPlatform("tiktok")}
|
|
>
|
|
<div className="flex items-center">
|
|
<TiktokLandingIcon />
|
|
<p
|
|
className={`pl-2 text-sm ${
|
|
selectedPlatform === "tiktok"
|
|
? "font-semibold"
|
|
: "text-slate-600 dark:text-slate-50"
|
|
}`}
|
|
>
|
|
Tiktok
|
|
</p>
|
|
</div>
|
|
</Button> */}
|
|
<Button
|
|
className="min-w-[60px]"
|
|
variant={selectedPlatform === "youtube" ? "solid" : "flat"}
|
|
onClick={() => setSelectedPlatform("youtube")}
|
|
>
|
|
<div className="flex items-center">
|
|
<YoutubeLandingIcon />
|
|
<p
|
|
className={`pl-2 text-sm ${
|
|
selectedPlatform === "youtube"
|
|
? "font-semibold"
|
|
: "text-slate-600 dark:text-slate-50"
|
|
}`}
|
|
>
|
|
Youtube
|
|
</p>
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
<div className={selectedPlatform === "x" ? "" : "hidden"}>
|
|
<TwitterWidget />
|
|
</div>
|
|
<div className={selectedPlatform === "instagram" ? "" : "hidden"}>
|
|
<InstagramWidget />
|
|
</div>
|
|
{/* <div className={selectedPlatform === "facebook" ? "" : "hidden"}>
|
|
<FacebookWidget />
|
|
</div> */}
|
|
{/* <div className={selectedPlatform === "tiktok" ? "" : "hidden"}>
|
|
<FacebookWidget />
|
|
</div> */}
|
|
<div className={selectedPlatform === "youtube" ? "" : "hidden"}>
|
|
<YoutubeWidget />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|