import { SocialLinks } from "@/components/ui/social-links";
const socials = [
{
name: "Instagram",
image:
"https://cdn.21st.dev/assets/localized/6486882af723b976a81fed3662a2950cb06a250d8978efdb5e3f0ac3590b5fae.png",
},
{
name: "LinkedIn",
image:
"https://cdn.21st.dev/assets/localized/cad748af0ff182f9094bae80608cb5468285a8c50deb710dc27c646f5a796f33.png",
},
{
name: "Spotify",
image:
"https://cdn.21st.dev/assets/localized/8467017d55ce030ab2d311a7ed28f0b98dafe8ba01ba0e1fe1447bf238d9f825.png",
},
{
name: "TikTok",
image:
"https://cdn.21st.dev/assets/localized/c6c3f1ab1b7934ee11b9b55ad929cafeed3786ba78cbc4a2853de7e617c7bf01.png",
},
];
function SocialLinksDemo() {
return (
<main className="relative flex min-h-screen w-full items-start justify-center px-4 py-10 md:items-center">
<SocialLinks socials={socials} />
</main>
);
}
function SocialLinksCustomGap() {
return (
<main className="relative flex min-h-screen w-full items-start justify-center px-4 py-10 md:items-center">
<SocialLinks socials={socials.slice(0, 2)} className="gap-4" />
</main>
);
}
export { SocialLinksDemo, SocialLinksCustomGap };
export default SocialLinksDemo;
