82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
import { ActionIcon, Card, Flex, Image, Text, Tooltip } from "@mantine/core";
|
|
import { Prisma } from "@prisma/client";
|
|
import { useTransitionRouter } from "next-view-transitions";
|
|
import { IconBrandInstagram, IconBrandFacebook, IconBrandTwitter, IconWorld } from "@tabler/icons-react";
|
|
|
|
function SosmedView({
|
|
data,
|
|
}: {
|
|
data: Prisma.MediaSosialGetPayload<{ include: { image: true } }>[];
|
|
}) {
|
|
const router = useTransitionRouter();
|
|
|
|
const fallbackIcon = (platform?: string) => {
|
|
switch (platform?.toLowerCase()) {
|
|
case "instagram":
|
|
return <IconBrandInstagram size={22} />;
|
|
case "facebook":
|
|
return <IconBrandFacebook size={22} />;
|
|
case "twitter":
|
|
return <IconBrandTwitter size={22} />;
|
|
default:
|
|
return <IconWorld size={22} />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Flex gap="lg" justify="center" align="center" wrap="wrap">
|
|
{data && data.length > 0 ? (
|
|
data.map((item, k) => (
|
|
<Tooltip
|
|
key={k}
|
|
label={item.name || "Tautan Sosial"}
|
|
withArrow
|
|
position="top"
|
|
transitionProps={{ transition: "pop", duration: 150 }}
|
|
>
|
|
<ActionIcon
|
|
variant="light"
|
|
radius="xl"
|
|
size="xl"
|
|
onClick={() => item.iconUrl && router.push(item.iconUrl)}
|
|
style={{
|
|
transition: "all 0.3s ease",
|
|
boxShadow: "0 0 12px rgba(28, 110, 164, 0.6)",
|
|
}}
|
|
>
|
|
{item.image?.link ? (
|
|
<Image
|
|
src={item.image.link}
|
|
alt={item.name || "ikon"}
|
|
w={24}
|
|
h={24}
|
|
fit="contain"
|
|
loading="lazy"
|
|
/>
|
|
) : (
|
|
fallbackIcon(item.name)
|
|
)}
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
))
|
|
) : (
|
|
<Card
|
|
shadow="md"
|
|
radius="xl"
|
|
p="lg"
|
|
withBorder
|
|
style={{
|
|
background: "linear-gradient(135deg, #1C6EA4 0%, #000 100%)",
|
|
}}
|
|
>
|
|
<Text ta="center" c="dimmed" size="sm">
|
|
Belum ada media sosial yang terhubung
|
|
</Text>
|
|
</Card>
|
|
)}
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
export default SosmedView;
|