From e76a5f847e78fee4e62f6eb37d468557a1504c55 Mon Sep 17 00:00:00 2001
From: 简律纯 <hsiangnianian@outlook.com>
Date: Wed, 3 May 2023 01:22:45 +0800
Subject:

---
 .../pages/pack-home/PackBenchmarkTabs.tsx          | 149 ---------------------
 1 file changed, 149 deletions(-)
 delete mode 100644 docs/components/pages/pack-home/PackBenchmarkTabs.tsx

(limited to 'docs/components/pages/pack-home/PackBenchmarkTabs.tsx')

diff --git a/docs/components/pages/pack-home/PackBenchmarkTabs.tsx b/docs/components/pages/pack-home/PackBenchmarkTabs.tsx
deleted file mode 100644
index f771fb1..0000000
--- a/docs/components/pages/pack-home/PackBenchmarkTabs.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import { useRef, useState } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { BenchmarkCategory } from "./PackBenchmarks";
-import classNames from "classnames";
-import gradients from "../home-shared/gradients.module.css";
-
-const TABS: {
-  id: BenchmarkCategory;
-  title: string;
-  soon: boolean;
-  tooltip: string;
-}[] = [
-  {
-    id: "cold",
-    title: "Cold Start",
-    soon: false,
-    tooltip: "First run",
-  },
-  {
-    id: "file_change",
-    title: "File Change",
-    soon: false,
-    tooltip: "Hot Reload (HMR)",
-  },
-  {
-    id: "code_build",
-    title: "Code Build",
-    soon: true,
-    tooltip: "First Build",
-  },
-  {
-    id: "build_from_cache",
-    title: "Build from Cache",
-    soon: true,
-    tooltip: "Second Build",
-  },
-];
-
-const TRANSITION = {
-  duration: 0.3,
-  ease: [0.59, 0.15, 0.18, 0.93],
-};
-
-function SoonBadge() {
-  return (
-    <span className="inline-flex items-center h-5 px-2 rounded-full text-xs font-medium dark:text-[#888888] dark:bg-[#333333] text-[#666666] bg-[#EAEAEA] ">
-      Soon
-    </span>
-  );
-}
-
-export function PackBenchmarkTabs({
-  onTabChange,
-}: {
-  onTabChange: (tab: BenchmarkCategory) => void;
-}) {
-  const [activeTab, setActiveTab] = useState(0);
-
-  const onTabClick = (index: number) => {
-    if (TABS[index].soon) return;
-    setActiveTab(index);
-    onTabChange(TABS[index].id);
-  };
-
-  return (
-    <div className="flex items-center justify-center w-full">
-      <div className="relative flex items-center justify-start pb-12 overflow-x-scroll overflow-y-clip no-scrollbar">
-        <AnimatePresence>
-          <div className="flex flex-row items-center rounded-full p-1 dark:bg-[#ffffff0d] bg-[#00000005] mx-5">
-            {TABS.map((tab, index) => (
-              <button
-                className="relative px-5 py-3"
-                key={tab.id}
-                onClick={() => onTabClick(index)}
-                disabled={tab.soon}
-              >
-                {TABS[activeTab].id === tab.id && (
-                  <motion.div
-                    className={classNames(
-                      gradients.benchmarkActiveTab,
-                      "absolute w-full rounded-full h-full top-0 left-0 border border-neutral-200 dark:border-neutral-800"
-                    )}
-                    layoutId="tabSwitcher"
-                    style={{ borderRadius: 36 }}
-                    transition={TRANSITION}
-                  />
-                )}
-                <ToolTip text={tab.tooltip}>
-                  <motion.div
-                    animate={{ opacity: activeTab === index ? 1 : 0.4 }}
-                    className="flex flex-row items-center justify-center gap-2 whitespace-nowrap"
-                    transition={{ ...TRANSITION, duration: 0.2 }}
-                    style={{ cursor: tab.soon ? "not-allowed" : "pointer" }}
-                  >
-                    <span
-                      className="z-10 m-0 font-medium"
-                      style={{ opacity: tab.soon ? 0.6 : 1 }}
-                    >
-                      {tab.title}
-                    </span>
-                    {tab.soon && <SoonBadge />}
-                  </motion.div>
-                </ToolTip>
-              </button>
-            ))}
-          </div>
-        </AnimatePresence>
-      </div>
-    </div>
-  );
-}
-
-function ToolTip({ text, children }: { text; children: React.ReactNode }) {
-  const [show, setShow] = useState(false);
-  const timeout = useRef<NodeJS.Timeout>();
-
-  const onMouseEnter = () => {
-    timeout.current = setTimeout(() => {
-      setShow(true);
-    }, 800);
-  };
-
-  const onMouseLeave = () => {
-    clearTimeout(timeout.current);
-    setShow(false);
-  };
-
-  return (
-    <div
-      className="relative"
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-    >
-      <motion.div
-        animate={show ? { opacity: 1, y: 0 } : { opacity: 0, y: -4 }}
-        transition={{ duration: 0.2, ease: [0.59, 0.15, 0.18, 0.93] }}
-        className={
-          "absolute top-[100%] mt-4 w-full flex flex-col items-center justify-center z-50"
-        }
-      >
-        <div className={gradients.tooltipArrow} />
-        <div className="dark:bg-[#333333] bg-neutral-100 rounded-lg px-4 py-1 whitespace-nowrap">
-          <p className="font-sans text-sm text-[#888888]">{text}</p>
-        </div>
-      </motion.div>
-      <div>{children}</div>
-    </div>
-  );
-}
-- 
cgit v1.2.3-70-g09d2