add sharing buttons

commafeed-client/src/components/content/ShareButtons.tsx

@@ -0,0 +1,55 @@
+import { ActionIcon, Box, createStyles, SimpleGrid } from "@mantine/core"
+import { Constants } from "app/constants"
+import { useAppSelector } from "app/store"
+import { SharingSettings } from "app/types"
+import { IconType } from "react-icons"
+
+type Color = `#${string}`
+
+const useStyles = createStyles((theme, props: { color: Color }) => ({
+    socialIcon: {
+        color: props.color,
+        backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[2] : "white",
+        borderRadius: "50%",
+    },
+}))
+
+function ShareButton({ url, icon, color }: { url: string; icon: IconType; color: Color }) {
+    const { classes } = useStyles({ color })
+
+    const onClick = (e: React.MouseEvent) => {
+        e.preventDefault()
+        window.open(url, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=800,height=600")
+    }
+
+    return (
+        <ActionIcon>
+            <a href={url} target="_blank" rel="noreferrer" onClick={onClick}>
+                <Box p={8} className={classes.socialIcon}>
+                    {icon({ size: 18 })}
+                </Box>
+            </a>
+        </ActionIcon>
+    )
+}
+
+export function ShareButtons(props: { url: string; description: string }) {
+    const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
+    const url = encodeURIComponent(props.url)
+    const desc = encodeURIComponent(props.description)
+
+    return (
+        <SimpleGrid cols={4}>
+            {(Object.keys(Constants.sharing) as Array<keyof SharingSettings>)
+                .filter(site => sharingSettings && sharingSettings[site])
+                .map(site => (
+                    <ShareButton
+                        key={site}
+                        icon={Constants.sharing[site].icon}
+                        color={Constants.sharing[site].color}
+                        url={Constants.sharing[site].url(url, desc)}
+                    />
+                ))}
+        </SimpleGrid>
+    )
+}