aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/docs/components/pages/pack-home/PackBenchmarkTabs.tsx
diff options
context:
space:
mode:
author简律纯 <hsiangnianian@outlook.com>2023-05-03 01:22:45 +0800
committer简律纯 <hsiangnianian@outlook.com>2023-05-03 01:22:45 +0800
commite76a5f847e78fee4e62f6eb37d468557a1504c55 (patch)
tree4bcdeeeafb5bdc5945d855a22e6495926b5fbdd6 /docs/components/pages/pack-home/PackBenchmarkTabs.tsx
parent4ddbf86780b7dd2f74f8fcc037ede1222f73f81e (diff)
downloadHydroRoll-e76a5f847e78fee4e62f6eb37d468557a1504c55.tar.gz
HydroRoll-e76a5f847e78fee4e62f6eb37d468557a1504c55.zip
Diffstat (limited to 'docs/components/pages/pack-home/PackBenchmarkTabs.tsx')
-rw-r--r--docs/components/pages/pack-home/PackBenchmarkTabs.tsx149
1 files changed, 0 insertions, 149 deletions
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>
- );
-}