@bbki.ng/site 5.4.22 → 5.4.25

package/src/blog/components/Pochacco/watch.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import { PochaccoProps } from "@/components/Pochacco/Pochacco";
-
-export const Watch = (props: PochaccoProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    version="1.0"
-    width={props.size || 48}
-    height={props.size || 48}
-    viewBox="0 0 128.000000 128.000000"
-    preserveAspectRatio="xMidYMid meet"
-  >
-    <g
-      transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
-      fill="#000000"
-      stroke="none"
-    >
-      <path d="M1090 1111 c0 -39 -1 -41 -42 -52 -24 -7 -68 -11 -98 -9 -90 4 -105 3 -133 -4 -15 -3 -27 -12 -27 -20 0 -10 15 -12 68 -8 53 3 76 0 103 -13 47 -25 78 -50 106 -87 22 -31 23 -39 23 -210 l0 -178 -25 0 c-36 0 -99 -34 -151 -82 -39 -36 -50 -41 -108 -45 -62 -5 -66 -4 -95 25 -21 21 -31 40 -31 61 0 22 -5 31 -16 31 -14 0 -16 -8 -11 -45 8 -79 52 -108 155 -106 59 1 62 0 62 -23 0 -15 12 -35 32 -51 28 -24 38 -26 78 -21 25 3 57 15 72 26 15 11 29 20 32 20 3 0 7 -44 8 -97 4 -144 22 -122 31 37 8 158 8 141 -1 559 -5 245 -10 325 -19 329 -9 2 -13 -9 -13 -37z m-20 -101 c0 -5 -4 -10 -9 -10 -6 0 -13 5 -16 10 -3 6 1 10 9 10 9 0 16 -4 16 -10z m21 -520 c23 -13 25 -50 3 -96 -14 -28 -19 -32 -35 -24 -19 11 -69 78 -69 93 0 8 56 36 73 37 5 0 17 -5 28 -10z" />
-      <path d="M760 1091 c-14 -27 -13 -51 3 -51 17 0 69 54 60 63 -13 14 -53 6 -63 -12z" />
-      <path d="M647 1053 c-18 -17 -5 -33 28 -33 39 0 46 14 16 30 -23 12 -35 13 -44 3z" />
-      <path d="M599 1000 c-5 -29 -2 -33 27 -35 46 -4 65 11 40 30 -22 17 -65 20 -67 5z" />
-      <path d="M607 932 c-9 -10 -27 -42 -40 -72 -14 -30 -43 -77 -66 -105 -58 -70 -83 -126 -89 -201 -4 -57 -3 -64 13 -64 28 0 101 82 118 131 l15 44 20 -45 c27 -60 46 -85 60 -76 8 5 2 26 -19 69 -54 106 -49 238 11 292 23 21 26 45 7 45 -8 0 -21 -8 -30 -18z m-117 -261 c0 -12 -20 -25 -27 -18 -7 7 6 27 18 27 5 0 9 -4 9 -9z m30 -11 c0 -5 -5 -10 -11 -10 -5 0 -7 5 -4 10 3 6 8 10 11 10 2 0 4 -4 4 -10z m-60 -59 c0 -6 -4 -13 -10 -16 -5 -3 -10 1 -10 9 0 9 5 16 10 16 6 0 10 -4 10 -9z" />
-      <path d="M1020 726 c0 -28 12 -46 30 -46 25 0 33 16 20 40 -12 23 -50 27 -50 6z" />
-      <path d="M920 615 c-28 -33 13 -61 44 -29 20 20 20 30 0 38 -23 9 -30 8 -44 -9z" />
-      <path d="M770 586 c0 -26 24 -51 40 -41 14 8 13 38 -2 53 -19 19 -38 14 -38 -12z" />
-    </g>
-  </svg>
-);

package/src/blog/components/Version.tsx

@@ -1,14 +0,0 @@
-import { Tag } from "@bbki.ng/components";
-import React from "react";
-
-export const Version = ({ className }: { className?: string }) => {
-  // @ts-ignore
-  const appVer = GLOBAL_BBKING_VERSION;
-  const tagUrl = `https://github.com/bbbottle/bottle/releases/tag/@bbki.ng/site@${appVer}`;
-
-  return (
-    <Tag to={tagUrl} external prefix="v" className={className}>
-      {appVer}
-    </Tag>
-  );
-};

package/src/blog/components/app_ctx_menu/LoginMenuItem.tsx

@@ -1,72 +0,0 @@
-import { useAuthed } from "@/hooks/use_authed";
-import { useSupabaseSession } from "@/hooks/use_supa_session";
-import {
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuShortcut,
-  Link,
-} from "@bbki.ng/components";
-import React from "react";
-import { useNavigate } from "react-router-dom";
-import { supabase } from "@/constants";
-import { toast } from "sonner";
-import { confirm } from "@/utils";
-
-export const LoginMenuItem = () => {
-  const sess = useSupabaseSession();
-  const nav = useNavigate();
-
-  if (sess?.user != null) {
-    return (
-      <ContextMenuItem
-        onClick={() => {
-          confirm("确定退出登录吗？", () => {
-            supabase.auth.signOut().then(() => {
-              toast.success("已退出登录", {
-                position: "bottom-right",
-              });
-            });
-          });
-        }}
-      >
-        {sess?.user?.user_metadata && (
-          <img
-            src={sess?.user?.user_metadata.avatar_url}
-            alt="avatar"
-            style={{ width: 16, height: 16 }}
-            className="mr-8"
-            crossOrigin="anonymous"
-          />
-        )}
-        {sess?.user?.email ?? ""}
-      </ContextMenuItem>
-    );
-  }
-
-  return (
-    <ContextMenuItem
-      onClick={() => {
-        nav("/login");
-      }}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className="feather feather-log-in mr-8"
-      >
-        <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
-        <polyline points="10 17 15 12 10 7"></polyline>
-        <line x1="15" y1="12" x2="3" y2="12"></line>
-      </svg>
-      login
-      <ContextMenuShortcut className="mr-1">l</ContextMenuShortcut>
-    </ContextMenuItem>
-  );
-};

package/src/blog/components/app_ctx_menu/PostMenuItem.tsx

@@ -1,22 +0,0 @@
-import { ContextMenuItem } from "@bbki.ng/components";
-import React from "react";
-import {useAuthedStringPost} from "@/hooks/use_authed_string_post";
-
-export const PostMenuItem = () => {
-
-    const post = useAuthedStringPost();
-
-    const postFromClipboard = () => {
-        navigator.clipboard
-            .readText()
-            .then(post);
-    }
-
-    return (
-    <ContextMenuItem onClick={postFromClipboard}
-      inset
-    >
-        post from clipboard
-    </ContextMenuItem>
-  );
-};

package/src/blog/components/app_ctx_menu/VersionMenuItem.tsx

@@ -1,13 +0,0 @@
-import { ContextMenuItem, Tag } from "@bbki.ng/components";
-import React from "react";
-
-export const VersionMenuItem = () => {
-  // @ts-ignore
-  const appVer = GLOBAL_BBKING_VERSION;
-
-  return (
-    <ContextMenuItem inset disabled>
-      v{appVer}
-    </ContextMenuItem>
-  );
-};

package/src/blog/components/app_ctx_menu/ViewSourceMenuItem.tsx

@@ -1,34 +0,0 @@
-import { ContextMenuItem, ContextMenuShortcut } from "@bbki.ng/components";
-import React from "react";
-import { GITHUB_REPO_ADDRESS } from "@/constants";
-
-export const ViewSourceMenuItem = () => {
-  // @ts-ignore
-  const appVer = GLOBAL_BBKING_VERSION;
-  return (
-    <ContextMenuItem
-      onClick={() => {
-        // open tagUrl in new tab
-        window.open(GITHUB_REPO_ADDRESS, "_blank");
-      }}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className="feather feather-code mr-8"
-      >
-        <polyline points="16 18 22 12 16 6"></polyline>
-        <polyline points="8 6 2 12 8 18"></polyline>
-      </svg>
-      v{appVer}
-      <ContextMenuShortcut className="mr-1">s</ContextMenuShortcut>
-    </ContextMenuItem>
-  );
-};

package/src/blog/components/app_ctx_menu/index.tsx

@@ -1,35 +0,0 @@
-import React, { ReactElement, useEffect } from "react";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuTrigger,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuItem,
-} from "@bbki.ng/components";
-import { LoginMenuItem } from "@/components/app_ctx_menu/LoginMenuItem";
-import { ViewSourceMenuItem } from "@/components/app_ctx_menu/ViewSourceMenuItem";
-import { PostMenuItem } from "@/components/app_ctx_menu/PostMenuItem";
-import { useAuthed } from "@/hooks/use_authed";
-
-export const AppCtxMenu = (props: { children: ReactElement }) => {
-  const [showPluginEntry, setShowPluginEntry] = React.useState(false);
-
-  const showEntry = () => {
-    setShowPluginEntry(true);
-  };
-
-  const isKing = useAuthed();
-
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger>{props.children}</ContextMenuTrigger>
-      <ContextMenuContent className="">
-        <LoginMenuItem />
-        <ViewSourceMenuItem />
-        {isKing && <PostMenuItem />}
-        {/*{showPluginEntry && <PluginsMenuItem />}*/}
-      </ContextMenuContent>
-    </ContextMenu>
-  );
-};

package/src/blog/components/article_ctx_menu/index.tsx

@@ -1,58 +0,0 @@
-import React, { ReactElement, useCallback } from "react";
-import { useAuthed } from "@/hooks/use_authed";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuTrigger,
-  ContextMenuItem,
-} from "@bbki.ng/components";
-import { useNavigate, useParams } from "react-router-dom";
-import { useDelPost } from "@/hooks/use_delete_post";
-import { toast } from "sonner";
-import { confirm } from "@/utils";
-import { useLoadingIndicator } from "@/hooks/useLoadingIndicator";
-
-export const ArticleCtxMenu = (props: { children: ReactElement }) => {
-  const auth = useAuthed();
-  const del = useDelPost();
-  const routeParams = useParams();
-  const nav = useNavigate();
-  const title = routeParams.title;
-  const dot = useLoadingIndicator();
-
-  if (!auth) {
-    return props.children;
-  }
-
-  if (title == null || title === "") {
-    return props.children;
-  }
-
-  const doDel = useCallback(() => {
-    dot.setVisibility(true);
-    del(title)
-      .then(() => {
-        toast.success("删除成功", {
-          position: "bottom-right",
-        });
-        dot.setVisibility(false);
-        nav("/blog");
-      })
-      .catch(console.log);
-  }, [title]);
-
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger>{props.children}</ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem
-          onClick={() => {
-            confirm("确认删除？", doDel);
-          }}
-        >
-          remove
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-  );
-};

package/src/blog/components/blur_cover/index.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { TextColors } from "@/types/color";
-
-type blurCoverProps = {
-  textColor?: TextColors;
-  className?: string;
-  children: any;
-  height?: number;
-  visibleOnHover?: boolean;
-};
-
-export const BlurCover = (props: blurCoverProps) => {
-  const { textColor, children, className, height = 50, visibleOnHover } = props;
-  const cls = classnames(
-    className,
-    textColor,
-    "blur-cover",
-    "absolute",
-    "w-full",
-    "flex items-center justify-center"
-  );
-  return (
-    <div className={cls} style={{ height }}>
-      {children}
-    </div>
-  );
-};

package/src/blog/components/hotkey_nav/index.tsx

@@ -1,51 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import { useHotkeys } from "react-hotkeys-hook";
-import { GITHUB_REPO_ADDRESS, ROUTES } from "@/constants";
-
-enum HotKeys {
-  i = "i",
-  e = "e",
-  c = "c",
-  t = "t",
-  p = "p",
-  a = "a",
-  f = "f",
-  b = "b",
-  h = "h",
-  s = "s",
-  l = "l",
-  T = "shift+t",
-}
-
-const KEY_ROUTES = [
-  { key: HotKeys.i, route: ROUTES.INDEX },
-  { key: HotKeys.c, route: ROUTES.CONTENT },
-  { key: HotKeys.h, route: ROUTES.HELP },
-  { key: HotKeys.t, route: ROUTES.TAGS },
-  { key: HotKeys.l, route: ROUTES.LOGIN },
-];
-
-export const HotKeyNav = (props: any) => {
-  const nav = useNavigate();
-  const goto = (path: string) => {
-    nav(path);
-  };
-
-  useHotkeys(HotKeys.b, () => {
-    nav(-1);
-  });
-  useHotkeys(HotKeys.f, () => {
-    nav(1);
-  });
-  useHotkeys(HotKeys.s, () => {
-    window.open(GITHUB_REPO_ADDRESS);
-  });
-
-  KEY_ROUTES.map(({ key, route }) => {
-    useHotkeys(key, () => {
-      goto(route);
-    });
-  });
-
-  return props.children;
-};

package/src/blog/components/progress_bar/index.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { BgColors } from "@/types/color";
-import { floatNumberToPercentageString } from "@/utils";
-
-type progressBarProps = {
-  bgColor?: BgColors;
-  fgColor?: BgColors;
-  height?: number;
-  progress: number;
-};
-
-export const ProgressBar = (props: progressBarProps) => {
-  const {
-    height = 2,
-    fgColor = BgColors.BLUE,
-    bgColor = BgColors.GRAY,
-    progress,
-  } = props;
-
-  const wrapperCls = classnames("w-full", "text-left", bgColor);
-  const innerBarCls = classnames("h-full", fgColor);
-  return (
-    <div className={wrapperCls} style={{ height }}>
-      <div
-        className={innerBarCls}
-        style={{ width: floatNumberToPercentageString(progress) }}
-      />
-    </div>
-  );
-};

package/src/blog/components/reaction/emojis.tsx

@@ -1,143 +0,0 @@
-import React from "react";
-import { ReactNode } from "react";
-
-const HEART_SIZE = 12;
-
-export interface ReactionEmojiPair {
-  on: ReactNode;
-  off: ReactNode;
-  val: string;
-}
-
-const heart = (
-  <svg
-    data-testid="geist-icon"
-    height={HEART_SIZE}
-    width={HEART_SIZE}
-    stroke-linejoin="round"
-    viewBox="0 0 16 16"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M7.06463 3.20474C5.79164 1.93175 3.72772 1.93175 2.45474 3.20474C1.18175 4.47773 1.18175 6.54166 2.45474 7.81465L8 13.3599L13.5453 7.81465C14.8182 6.54166 14.8182 4.47773 13.5453 3.20474C12.2723 1.93175 10.2084 1.93175 8.93537 3.20474L8.53033 3.60979L8 4.14012L7.46967 3.60979L7.06463 3.20474ZM8 2.02321C6.13348 0.286219 3.21165 0.326509 1.39408 2.14408C-0.464694 4.00286 -0.464691 7.01653 1.39408 8.87531L7.46967 14.9509L8 15.4812L8.53033 14.9509L14.6059 8.87531C16.4647 7.01653 16.4647 4.00286 14.6059 2.14408C12.7884 0.326509 9.86653 0.286221 8 2.02321Z"
-      fill="currentColor"
-    ></path>
-  </svg>
-);
-
-const heartFill = (
-  <svg
-    data-testid="geist-icon"
-    height={HEART_SIZE}
-    width={HEART_SIZE}
-    stroke-linejoin="round"
-    className="text-red-400"
-    viewBox={`0 0 16 16`}
-  >
-    <path
-      d="M1.39408 2.14408C3.21165 0.326509 6.13348 0.286219 8 2.02321C9.86652 0.286221 12.7884 0.326509 14.6059 2.14408C16.4647 4.00286 16.4647 7.01653 14.6059 8.87531L8 15.4812L1.39408 8.87531C-0.464691 7.01653 -0.464694 4.00286 1.39408 2.14408Z"
-      fill="currentColor"
-    ></path>
-  </svg>
-);
-
-const happyFace = (
-  <svg
-    data-testid="geist-icon"
-    stroke-linejoin="round"
-    height={HEART_SIZE}
-    width={HEART_SIZE}
-    viewBox="0 0 16 16"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM11.5249 10.8478L11.8727 10.3286L10.8342 9.6329L10.4863 10.1522C9.94904 10.9543 9.0363 11.4802 8.00098 11.4802C6.96759 11.4802 6.05634 10.9563 5.51863 10.1567L5.16986 9.63804L4.13259 10.3356L4.48137 10.8542C5.2414 11.9844 6.53398 12.7302 8.00098 12.7302C9.47073 12.7302 10.7654 11.9816 11.5249 10.8478ZM6.75 6.75C6.75 7.30228 6.30228 7.75 5.75 7.75C5.19772 7.75 4.75 7.30228 4.75 6.75C4.75 6.19772 5.19772 5.75 5.75 5.75C6.30228 5.75 6.75 6.19772 6.75 6.75ZM10.25 7.75C10.8023 7.75 11.25 7.30228 11.25 6.75C11.25 6.19772 10.8023 5.75 10.25 5.75C9.69771 5.75 9.25 6.19772 9.25 6.75C9.25 7.30228 9.69771 7.75 10.25 7.75Z"
-      fill="currentColor"
-    ></path>
-  </svg>
-);
-
-const smileFace = (
-  <svg
-    height={HEART_SIZE}
-    width={HEART_SIZE}
-    data-testid="geist-icon"
-    className="text-gray-400"
-    stroke-linejoin="round"
-    viewBox="0 0 16 16"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM4.5 8.97498H3.875V9.59998C3.875 11.4747 5.81046 12.8637 7.99817 12.8637C10.1879 12.8637 12.125 11.4832 12.125 9.59998V8.97498H11.5H4.5ZM7.99817 11.6137C6.59406 11.6137 5.63842 10.9482 5.28118 10.225H10.7202C10.3641 10.9504 9.40797 11.6137 7.99817 11.6137Z"
-      fill="currentColor"
-    ></path>
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M6.15295 4.92093L5.375 3.5L4.59705 4.92093L3 5.21885L4.11625 6.39495L3.90717 8L5.375 7.30593L6.84283 8L6.63375 6.39495L7.75 5.21885L6.15295 4.92093ZM11.403 4.92093L10.625 3.5L9.84705 4.92093L8.25 5.21885L9.36625 6.39495L9.15717 8L10.625 7.30593L12.0928 8L11.8837 6.39495L13 5.21885L11.403 4.92093Z"
-      fill="var(--ds-amber-800)"
-    ></path>
-  </svg>
-);
-
-const unhappyFace = (
-  <svg
-    data-testid="geist-icon"
-    stroke-linejoin="round"
-    viewBox="0 0 16 16"
-    height={HEART_SIZE}
-    width={HEART_SIZE}
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM5.75 7.75C6.30228 7.75 6.75 7.30228 6.75 6.75C6.75 6.19772 6.30228 5.75 5.75 5.75C5.19772 5.75 4.75 6.19772 4.75 6.75C4.75 7.30228 5.19772 7.75 5.75 7.75ZM11.25 6.75C11.25 7.30228 10.8023 7.75 10.25 7.75C9.69771 7.75 9.25 7.30228 9.25 6.75C9.25 6.19772 9.69771 5.75 10.25 5.75C10.8023 5.75 11.25 6.19772 11.25 6.75ZM11.5249 11.2622L11.8727 11.7814L10.8342 12.4771L10.4863 11.9578C9.94904 11.1557 9.0363 10.6298 8.00098 10.6298C6.96759 10.6298 6.05634 11.1537 5.51863 11.9533L5.16986 12.4719L4.13259 11.7744L4.48137 11.2558C5.2414 10.1256 6.53398 9.37982 8.00098 9.37982C9.47073 9.37982 10.7654 10.1284 11.5249 11.2622Z"
-      fill="currentColor"
-    ></path>
-  </svg>
-);
-
-const sadFace = (
-  <svg
-    data-testid="geist-icon"
-    stroke-linejoin="round"
-    height={HEART_SIZE}
-    width={HEART_SIZE}
-    viewBox="0 0 16 16"
-    className="text-gray-400"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M4 9V16H5.5V9H4ZM12 9V16H10.5V9H12Z"
-      fill="var(--ds-blue-700)"
-    ></path>
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 9.57941 13.9367 11.0273 13 12.1536V14.2454C14.8289 12.7793 16 10.5264 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 10.5264 1.17107 12.7793 3 14.2454V12.1536C2.06332 11.0273 1.5 9.57941 1.5 8ZM8 14.5C8.51627 14.5 9.01848 14.4398 9.5 14.3261V15.8596C9.01412 15.9518 8.51269 16 8 16C7.48731 16 6.98588 15.9518 6.5 15.8596V14.3261C6.98152 14.4398 7.48373 14.5 8 14.5ZM3.78568 8.36533C4.15863 7.98474 4.67623 7.75 5.25 7.75C5.82377 7.75 6.34137 7.98474 6.71432 8.36533L7.78568 7.31548C7.14222 6.65884 6.24318 6.25 5.25 6.25C4.25682 6.25 3.35778 6.65884 2.71432 7.31548L3.78568 8.36533ZM10.75 7.75C10.1762 7.75 9.65863 7.98474 9.28568 8.36533L8.21432 7.31548C8.85778 6.65884 9.75682 6.25 10.75 6.25C11.7432 6.25 12.6422 6.65884 13.2857 7.31548L12.2143 8.36533C11.8414 7.98474 11.3238 7.75 10.75 7.75ZM6.25 12H9.75C9.75 11.0335 8.9665 10.25 8 10.25C7.0335 10.25 6.25 11.0335 6.25 12Z"
-      fill="currentColor"
-    ></path>
-  </svg>
-);
-
-export const hearts: ReactionEmojiPair = {
-  on: heartFill,
-  off: heart,
-  val: "❤️",
-};
-
-export const faces: ReactionEmojiPair = {
-  on: smileFace,
-  off: happyFace,
-  val: "🙂",
-};
-
-export const sadFaces: ReactionEmojiPair = {
-  on: sadFace,
-  off: unhappyFace,
-  val: "😞",
-};

package/src/blog/components/reaction/oh_reaction.tsx

@@ -1,105 +0,0 @@
-import React, {
-  ReactNode,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
-import { BlinkDot, Button, ButtonType } from "@bbki.ng/components";
-import { faces, hearts, ReactionEmojiPair, sadFaces } from "./emojis";
-import { ShareBtn } from "../share/share-btn";
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      "open-heart": React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLElement> & {
-          href?: string;
-          emoji?: string;
-          ariaDisabled?: boolean;
-          onClick?: React.MouseEventHandler<HTMLElement>;
-        },
-        HTMLElement
-      >;
-    }
-  }
-}
-
-const useHeartSent = (val: string) => {
-  const [sent, setSent] = useState(false);
-  const { setIsLoading } = useContext(GlobalLoadingContext);
-
-  const handleSent = (evt: Event) => {
-    const targetVal = (evt.target as HTMLElement).getAttribute("emoji");
-
-    if (targetVal == val) setSent(true);
-    setIsLoading(false);
-  };
-
-  useEffect(() => {
-    addEventListener("open-heart", handleSent);
-
-    return () => {
-      removeEventListener("open-heart", handleSent);
-    };
-  }, []);
-
-  return sent;
-};
-
-export const OpenHeartReaction = (props: {
-  title: string;
-  emojiPair: ReactionEmojiPair;
-}) => {
-  const { title, emojiPair = hearts } = props;
-  const sent = useHeartSent(emojiPair.val);
-
-  const { setIsLoading } = useContext(GlobalLoadingContext);
-
-  const ohRef = useRef<HTMLElement>(null);
-
-  const pressed = () => ohRef.current?.getAttribute("aria-pressed");
-
-  const handleHeartClick = () => {
-    if (sent || pressed()) {
-      return;
-    }
-
-    setIsLoading(true);
-  };
-
-  return (
-    <open-heart
-      ref={ohRef}
-      href={`https://oh.bbki.ng/?id=${title}`}
-      emoji={emojiPair.val}
-    >
-      <Button
-        size="small"
-        type={ButtonType.GHOST}
-        className="text-gray-400 hover:text-gray-600 transition-colors ease-in duration-200"
-        onClick={handleHeartClick}
-      >
-        {sent || pressed() ? emojiPair.on : emojiPair.off}
-      </Button>
-    </open-heart>
-  );
-};
-
-export const Reaction = (props: { title: string; url: string }) => {
-  return (
-    <div className="flex items-center">
-      <OpenHeartReaction title={props.title} emojiPair={hearts} />
-      <OpenHeartReaction title={props.title} emojiPair={faces} />
-      <OpenHeartReaction title={props.title} emojiPair={sadFaces} />
-
-      <ShareBtn
-        shareInfo={{
-          title: props.title,
-          url: props.url,
-        }}
-      />
-    </div>
-  );
-};