From d6a700b9804b9a88c74bcd809fd2a3d670d8c736 Mon Sep 17 00:00:00 2001 From: Shakhzod Kudratov Date: Thu, 24 Oct 2024 22:22:24 +0500 Subject: [PATCH] share buttons --- components/article-footer.tsx | 49 +++++++++++++++++++++--- package.json | 1 + pnpm-lock.yaml | 70 ++++++++++++++++++++++++++++++----- 3 files changed, 106 insertions(+), 14 deletions(-) diff --git a/components/article-footer.tsx b/components/article-footer.tsx index b48f582..62aa406 100644 --- a/components/article-footer.tsx +++ b/components/article-footer.tsx @@ -1,15 +1,38 @@ import Giscus from '@giscus/react'; -import { IconEye, IconThumbDown, IconThumbUp } from '@tabler/icons-react'; +import { + IconBrandFacebook, + IconBrandLinkedin, + IconBrandTelegram, + IconBrandX, + IconEye, + IconMail, + IconThumbDown, + IconThumbUp, +} from '@tabler/icons-react'; import { useLocalStorage } from '@uidotdev/usehooks'; import axios from 'axios'; import { useRouter } from 'next/router'; -import { useTheme } from 'nextra-theme-docs'; +import { useConfig, useTheme } from 'nextra-theme-docs'; import React from 'react'; - import { useMutation, useQuery, useQueryClient } from 'react-query'; +import { + EmailShareButton, + FacebookShareButton, + LinkedinShareButton, + TelegramShareButton, + TwitterShareButton, +} from 'react-share'; import type { Post } from 'pages/api/logic'; +const SHARE_BUTTONS = [ + { Button: FacebookShareButton, Icon: IconBrandFacebook }, + { Button: TwitterShareButton, Icon: IconBrandX }, + { Button: TelegramShareButton, Icon: IconBrandTelegram }, + { Button: LinkedinShareButton, Icon: IconBrandLinkedin }, + { Button: EmailShareButton, Icon: IconMail }, +] as const; + const Button: React.FC< { children: React.ReactNode; @@ -21,7 +44,7 @@ const Button: React.FC< className={[ 'border-2 p-1 rounded hover:disabled:opacity-50 hover:disabled:cursor-not-allowed transition-all', isActive - ? 'border-blue-500 text-blue-500' + ? 'border-green-500 text-green-500' : 'border-black/40 dark:border-white/20', ].join(' ')} {...props} @@ -37,6 +60,7 @@ const ArticleFooter = () => { // eslint-disable-next-line react-hooks/rules-of-hooks const { theme } = useTheme(); + const { title } = useConfig(); const [localStatus, setLocalStatus] = useLocalStorage< 'liked' | 'disliked' | null @@ -84,13 +108,14 @@ const ArticleFooter = () => { return ( <> -
+
{post?.views ?? 0}
+
{post?.dislikes ?? 0}
+
+ {SHARE_BUTTONS.map(({ Button, Icon }) => ( + + ))}
= 0.4'} + debug@2.6.9: + resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + debug@3.2.7: resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==} peerDependencies: @@ -1515,6 +1526,9 @@ packages: encoding-sniffer@0.2.0: resolution: {integrity: sha512-ju7Wq1kg04I3HtiYIOrUrdfdDvkyO9s5XM8QAj/bN61Yo/Vb4vgJxy5vi4Yxk01gWHbrofpPtpxM8bKger9jhg==} + encoding@0.1.13: + resolution: {integrity: sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==} + end-of-stream@1.4.4: resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==} @@ -2455,6 +2469,9 @@ packages: jsonc-parser@3.3.1: resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==} + jsonp@0.2.1: + resolution: {integrity: sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==} + jsx-ast-utils@3.3.5: resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==} engines: {node: '>=4.0'} @@ -2873,6 +2890,9 @@ packages: resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==} engines: {node: '>=10'} + ms@2.0.0: + resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==} + ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} @@ -3441,6 +3461,11 @@ packages: peerDependencies: react: ^16.0.0 || ^17.0.0 || ^18.0.0 + react-share@5.1.0: + resolution: {integrity: sha512-OvyfMtj/0UzH1wi90OdHhZVJ6WUC/+IeWvBwppeZozwIGyAjQgyR0QXlHOrxVHVECqnGvcpBaFTXVrqouTieaw==} + peerDependencies: + react: ^17 || ^18 + react-tabs@6.0.2: resolution: {integrity: sha512-aQXTKolnM28k3KguGDBSAbJvcowOQr23A+CUJdzJtOSDOtTwzEaJA+1U4KwhNL9+Obe+jFS7geuvA7ICQPXOnQ==} peerDependencies: @@ -4782,7 +4807,7 @@ snapshots: '@redocly/config@0.12.1': {} - '@redocly/openapi-core@1.25.8': + '@redocly/openapi-core@1.25.8(encoding@0.1.13)': dependencies: '@redocly/ajv': 8.11.2 '@redocly/config': 0.12.1 @@ -4792,7 +4817,7 @@ snapshots: js-yaml: 4.1.0 lodash.isequal: 4.5.0 minimatch: 5.1.6 - node-fetch: 2.7.0 + node-fetch: 2.7.0(encoding@0.1.13) pluralize: 8.0.0 yaml-ast-parser: 0.0.43 transitivePeerDependencies: @@ -5595,6 +5620,10 @@ snapshots: es-errors: 1.3.0 is-data-view: 1.0.1 + debug@2.6.9: + dependencies: + ms: 2.0.0 + debug@3.2.7: dependencies: ms: 2.1.3 @@ -5749,6 +5778,11 @@ snapshots: iconv-lite: 0.6.3 whatwg-encoding: 3.1.1 + encoding@0.1.13: + dependencies: + iconv-lite: 0.6.3 + optional: true + end-of-stream@1.4.4: dependencies: once: 1.4.0 @@ -6904,6 +6938,12 @@ snapshots: jsonc-parser@3.3.1: {} + jsonp@0.2.1: + dependencies: + debug: 2.6.9 + transitivePeerDependencies: + - supports-color + jsx-ast-utils@3.3.5: dependencies: array-includes: 3.1.8 @@ -7573,6 +7613,8 @@ snapshots: mrmime@1.0.1: {} + ms@2.0.0: {} + ms@2.1.3: {} mux.js@6.0.1: @@ -7716,9 +7758,11 @@ snapshots: dependencies: http2-client: 1.3.5 - node-fetch@2.7.0: + node-fetch@2.7.0(encoding@0.1.13): dependencies: whatwg-url: 5.0.0 + optionalDependencies: + encoding: 0.1.13 node-gyp-build@4.8.2: {} @@ -8184,6 +8228,14 @@ snapshots: react: 18.3.1 react-is: 18.3.1 + react-share@5.1.0(react@18.3.1): + dependencies: + classnames: 2.5.1 + jsonp: 0.2.1 + react: 18.3.1 + transitivePeerDependencies: + - supports-color + react-tabs@6.0.2(react@18.3.1): dependencies: clsx: 2.1.1 @@ -8225,10 +8277,10 @@ snapshots: real-require@0.2.0: {} - redoc@2.2.0(core-js@3.38.1)(enzyme@3.11.0)(mobx@6.13.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(styled-components@5.3.11(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)): + redoc@2.2.0(core-js@3.38.1)(encoding@0.1.13)(enzyme@3.11.0)(mobx@6.13.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(styled-components@5.3.11(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)): dependencies: '@cfaester/enzyme-adapter-react-18': 0.8.0(enzyme@3.11.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@redocly/openapi-core': 1.25.8 + '@redocly/openapi-core': 1.25.8(encoding@0.1.13) classnames: 2.5.1 core-js: 3.38.1 decko: 1.2.0 @@ -8252,7 +8304,7 @@ snapshots: slugify: 1.4.7 stickyfill: 1.1.1 styled-components: 5.3.11(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1) - swagger2openapi: 7.0.8 + swagger2openapi: 7.0.8(encoding@0.1.13) url-template: 2.0.8 transitivePeerDependencies: - encoding @@ -8741,10 +8793,10 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} - swagger2openapi@7.0.8: + swagger2openapi@7.0.8(encoding@0.1.13): dependencies: call-me-maybe: 1.0.2 - node-fetch: 2.7.0 + node-fetch: 2.7.0(encoding@0.1.13) node-fetch-h2: 2.3.0 node-readfiles: 0.2.0 oas-kit-common: 1.0.8