mirror of
https://github.com/community-scripts/ProxmoxVE.git
synced 2025-09-10 09:24:38 +00:00
feat: enhance github stars button to be better looking and more compact to make mobile compatibility easier in the future
This commit is contained in:
Bram Suurd
parent
e77612c27e
commit
e9fd39d354
12 changed files with 1106 additions and 24 deletions
3
frontend/components.json
generated
3
frontend/components.json
generated
|
|
@ -13,5 +13,8 @@
|
|||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils"
|
||||
},
|
||||
"registries": {
|
||||
"@animate-ui": "https://animate-ui.com/r/{name}.json"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
95
frontend/package-lock.json
generated
95
frontend/package-lock.json
generated
|
|
@ -31,8 +31,9 @@
|
|||
"date-fns": "^4.1.0",
|
||||
"framer-motion": "^11.18.2",
|
||||
"fuse.js": "^7.1.0",
|
||||
"lucide-react": "^0.453.0",
|
||||
"lucide-react": "^0.542.0",
|
||||
"mini-svg-data-uri": "^1.4.4",
|
||||
"motion": "^12.23.12",
|
||||
"next": "15.5.2",
|
||||
"next-themes": "^0.4.4",
|
||||
"nuqs": "^2.4.1",
|
||||
|
|
@ -46,6 +47,7 @@
|
|||
"react-dom": "19.0.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-simple-typewriter": "^5.0.1",
|
||||
"react-use-measure": "^2.1.7",
|
||||
"sharp": "^0.33.5",
|
||||
"simple-icons": "^13.21.0",
|
||||
"sonner": "^1.7.4",
|
||||
|
|
@ -9293,12 +9295,12 @@
|
|||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "0.453.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz",
|
||||
"integrity": "sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==",
|
||||
"version": "0.542.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.542.0.tgz",
|
||||
"integrity": "sha512-w3hD8/SQB7+lzU2r4VdFyzzOzKnUjTZIF/MQJGSSvni7Llewni4vuViRppfRAa2guOsY5k4jZyxw/i9DQHv+dw==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
|
|
@ -10339,6 +10341,32 @@
|
|||
"pathe": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/motion": {
|
||||
"version": "12.23.12",
|
||||
"resolved": "https://registry.npmjs.org/motion/-/motion-12.23.12.tgz",
|
||||
"integrity": "sha512-8jCD8uW5GD1csOoqh1WhH1A6j5APHVE15nuBkFeRiMzYBdRwyAHmSP/oXSuW0WJPZRXTFdBoG4hY9TFWNhhwng==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"framer-motion": "^12.23.12",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/motion-dom": {
|
||||
"version": "11.18.1",
|
||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz",
|
||||
|
|
@ -10354,6 +10382,48 @@
|
|||
"integrity": "sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/motion/node_modules/framer-motion": {
|
||||
"version": "12.23.12",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
|
||||
"integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-dom": "^12.23.12",
|
||||
"motion-utils": "^12.23.6",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/motion/node_modules/motion-dom": {
|
||||
"version": "12.23.12",
|
||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
|
||||
"integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-utils": "^12.23.6"
|
||||
}
|
||||
},
|
||||
"node_modules/motion/node_modules/motion-utils": {
|
||||
"version": "12.23.6",
|
||||
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
|
||||
"integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
|
|
@ -11990,6 +12060,21 @@
|
|||
"react": ">= 0.14.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-use-measure": {
|
||||
"version": "2.1.7",
|
||||
"resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
|
||||
"integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.13",
|
||||
"react-dom": ">=16.13"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
|
|
|
|||
4
frontend/package.json
generated
4
frontend/package.json
generated
|
|
@ -38,8 +38,9 @@
|
|||
"date-fns": "^4.1.0",
|
||||
"framer-motion": "^11.18.2",
|
||||
"fuse.js": "^7.1.0",
|
||||
"lucide-react": "^0.453.0",
|
||||
"lucide-react": "^0.542.0",
|
||||
"mini-svg-data-uri": "^1.4.4",
|
||||
"motion": "^12.23.12",
|
||||
"next": "15.5.2",
|
||||
"next-themes": "^0.4.4",
|
||||
"nuqs": "^2.4.1",
|
||||
|
|
@ -53,6 +54,7 @@
|
|||
"react-dom": "19.0.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-simple-typewriter": "^5.0.1",
|
||||
"react-use-measure": "^2.1.7",
|
||||
"sharp": "^0.33.5",
|
||||
"simple-icons": "^13.21.0",
|
||||
"sonner": "^1.7.4",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
import type { VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cva } from "class-variance-authority";
|
||||
import { StarIcon } from "lucide-react";
|
||||
|
||||
import type { ButtonProps as ButtonPrimitiveProps } from "@/components/animate-ui/primitives/buttons/button";
|
||||
import type { GithubStarsProps } from "@/components/animate-ui/primitives/animate/github-stars";
|
||||
|
||||
import {
|
||||
GithubStars,
|
||||
GithubStarsIcon,
|
||||
GithubStarsLogo,
|
||||
GithubStarsNumber,
|
||||
GithubStarsParticles,
|
||||
} from "@/components/animate-ui/primitives/animate/github-stars";
|
||||
import { Button as ButtonPrimitive } from "@/components/animate-ui/primitives/buttons/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||
accent: "bg-accent text-accent-foreground shadow-xs hover:bg-accent/90",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const buttonStarVariants = cva("", {
|
||||
variants: {
|
||||
variant: {
|
||||
default: "fill-neutral-700 stroke-neutral-700 dark:fill-neutral-300 dark:stroke-neutral-300",
|
||||
accent: "fill-neutral-300 stroke-neutral-300 dark:fill-neutral-700 dark:stroke-neutral-700",
|
||||
outline: "fill-neutral-300 stroke-neutral-300 dark:fill-neutral-700 dark:stroke-neutral-700",
|
||||
ghost: "fill-neutral-300 stroke-neutral-300 dark:fill-neutral-700 dark:stroke-neutral-700",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
});
|
||||
|
||||
type GitHubStarsButtonProps = Omit<ButtonPrimitiveProps & GithubStarsProps, "asChild" | "children">
|
||||
& VariantProps<typeof buttonVariants>;
|
||||
|
||||
function GitHubStarsButton({
|
||||
className,
|
||||
username,
|
||||
repo,
|
||||
value,
|
||||
delay,
|
||||
inView,
|
||||
inViewMargin,
|
||||
inViewOnce,
|
||||
variant,
|
||||
size,
|
||||
...props
|
||||
}: GitHubStarsButtonProps) {
|
||||
return (
|
||||
<GithubStars
|
||||
asChild
|
||||
username={username}
|
||||
repo={repo}
|
||||
value={value}
|
||||
delay={delay}
|
||||
inView={inView}
|
||||
inViewMargin={inViewMargin}
|
||||
inViewOnce={inViewOnce}
|
||||
>
|
||||
<ButtonPrimitive className={cn(buttonVariants({ variant, size, className }))} {...props}>
|
||||
<GithubStarsLogo />
|
||||
<GithubStarsNumber />
|
||||
<GithubStarsParticles className="text-yellow-500">
|
||||
<GithubStarsIcon
|
||||
icon={StarIcon}
|
||||
data-variant={variant}
|
||||
className={cn(buttonStarVariants({ variant }))}
|
||||
activeClassName="text-yellow-500"
|
||||
size={18}
|
||||
/>
|
||||
</GithubStarsParticles>
|
||||
</ButtonPrimitive>
|
||||
</GithubStars>
|
||||
);
|
||||
}
|
||||
|
||||
export { GitHubStarsButton, type GitHubStarsButtonProps };
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
"use client";
|
||||
|
||||
import type { HTMLMotionProps } from "motion/react";
|
||||
|
||||
import { motion } from "motion/react";
|
||||
import * as React from "react";
|
||||
|
||||
import type { SlidingNumberProps } from "@/components/animate-ui/primitives/texts/sliding-number";
|
||||
import type { ParticlesEffectProps } from "@/components/animate-ui/primitives/effects/particles";
|
||||
import type { WithAsChild } from "@/components/animate-ui/primitives/animate/slot";
|
||||
import type { UseIsInViewOptions } from "@/hooks/use-is-in-view";
|
||||
|
||||
import { Particles, ParticlesEffect } from "@/components/animate-ui/primitives/effects/particles";
|
||||
import { SlidingNumber } from "@/components/animate-ui/primitives/texts/sliding-number";
|
||||
import { Slot } from "@/components/animate-ui/primitives/animate/slot";
|
||||
import { getStrictContext } from "@/lib/get-strict-context";
|
||||
import { useIsInView } from "@/hooks/use-is-in-view";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type GithubStarsContextType = {
|
||||
stars: number;
|
||||
setStars: (stars: number) => void;
|
||||
currentStars: number;
|
||||
setCurrentStars: (stars: number) => void;
|
||||
isCompleted: boolean;
|
||||
isLoading: boolean;
|
||||
};
|
||||
|
||||
const [GithubStarsProvider, useGithubStars] = getStrictContext<GithubStarsContextType>("GithubStarsContext");
|
||||
|
||||
type GithubStarsProps = WithAsChild<
|
||||
{
|
||||
children: React.ReactNode;
|
||||
username?: string;
|
||||
repo?: string;
|
||||
value?: number;
|
||||
delay?: number;
|
||||
} & UseIsInViewOptions
|
||||
& HTMLMotionProps<"div">
|
||||
>;
|
||||
|
||||
function GithubStars({
|
||||
ref,
|
||||
children,
|
||||
username,
|
||||
repo,
|
||||
value,
|
||||
delay = 0,
|
||||
inView = false,
|
||||
inViewMargin = "0px",
|
||||
inViewOnce = true,
|
||||
asChild = false,
|
||||
...props
|
||||
}: GithubStarsProps) {
|
||||
const { ref: localRef, isInView } = useIsInView(ref as React.Ref<HTMLDivElement>, {
|
||||
inView,
|
||||
inViewOnce,
|
||||
inViewMargin,
|
||||
});
|
||||
|
||||
const [stars, setStars] = React.useState(value ?? 0);
|
||||
const [currentStars, setCurrentStars] = React.useState(0);
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
const isCompleted = React.useMemo(() => currentStars === stars, [currentStars, stars]);
|
||||
|
||||
const Component = asChild ? Slot : motion.div;
|
||||
|
||||
React.useEffect(() => {
|
||||
if (value !== undefined && username && repo)
|
||||
return;
|
||||
if (!isInView) {
|
||||
setStars(0);
|
||||
setIsLoading(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
fetch(`https://api.github.com/repos/${username}/${repo}`)
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
if (data && typeof data.stargazers_count === "number") {
|
||||
setStars(data.stargazers_count);
|
||||
}
|
||||
})
|
||||
.catch(console.error)
|
||||
.finally(() => setIsLoading(false));
|
||||
}, delay);
|
||||
|
||||
return () => clearTimeout(timeout);
|
||||
}, [username, repo, value, isInView, delay]);
|
||||
|
||||
return (
|
||||
<GithubStarsProvider
|
||||
value={{
|
||||
stars,
|
||||
currentStars,
|
||||
isCompleted,
|
||||
isLoading,
|
||||
setStars,
|
||||
setCurrentStars,
|
||||
}}
|
||||
>
|
||||
{!isLoading && (
|
||||
<Component ref={localRef} {...props}>
|
||||
{children}
|
||||
</Component>
|
||||
)}
|
||||
</GithubStarsProvider>
|
||||
);
|
||||
}
|
||||
|
||||
type GithubStarsNumberProps = Omit<SlidingNumberProps, "number" | "fromNumber">;
|
||||
|
||||
function GithubStarsNumber({ padStart = true, ...props }: GithubStarsNumberProps) {
|
||||
const { stars, setCurrentStars } = useGithubStars();
|
||||
|
||||
return (
|
||||
<SlidingNumber number={stars} fromNumber={0} onNumberChange={setCurrentStars} padStart={padStart} {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
type GithubStarsIconProps<T extends React.ElementType> = {
|
||||
icon: React.ReactElement<T>;
|
||||
color?: string;
|
||||
activeClassName?: string;
|
||||
} & React.ComponentProps<T>;
|
||||
|
||||
function GithubStarsIcon<T extends React.ElementType>({
|
||||
icon: Icon,
|
||||
color = "currentColor",
|
||||
activeClassName,
|
||||
className,
|
||||
...props
|
||||
}: GithubStarsIconProps<T>) {
|
||||
const { stars, currentStars, isCompleted } = useGithubStars();
|
||||
const fillPercentage = (currentStars / stars) * 100;
|
||||
|
||||
return (
|
||||
<div style={{ position: "relative" }}>
|
||||
<Icon aria-hidden="true" className={cn(className)} {...props} />
|
||||
<Icon
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
fill: color,
|
||||
stroke: color,
|
||||
clipPath: `inset(${100 - (isCompleted ? fillPercentage : fillPercentage - 10)}% 0 0 0)`,
|
||||
}}
|
||||
className={cn(className, activeClassName)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type GithubStarsParticlesProps = ParticlesEffectProps & {
|
||||
children: React.ReactElement;
|
||||
size?: number;
|
||||
};
|
||||
|
||||
function GithubStarsParticles({ children, size = 4, style, ...props }: GithubStarsParticlesProps) {
|
||||
const { isCompleted } = useGithubStars();
|
||||
|
||||
return (
|
||||
<Particles animate={isCompleted}>
|
||||
{children}
|
||||
<ParticlesEffect
|
||||
style={{
|
||||
backgroundColor: "currentcolor",
|
||||
borderRadius: "50%",
|
||||
width: size,
|
||||
height: size,
|
||||
...style,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
</Particles>
|
||||
);
|
||||
}
|
||||
|
||||
type GithubStarsLogoProps = React.SVGProps<SVGSVGElement>;
|
||||
|
||||
function GithubStarsLogo(props: GithubStarsLogoProps) {
|
||||
return (
|
||||
<svg role="img" viewBox="0 0 24 24" fill="currentColor" aria-label="GitHub" {...props}>
|
||||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
GithubStars,
|
||||
type GithubStarsContextType,
|
||||
GithubStarsIcon,
|
||||
type GithubStarsIconProps,
|
||||
GithubStarsLogo,
|
||||
type GithubStarsLogoProps,
|
||||
GithubStarsNumber,
|
||||
type GithubStarsNumberProps,
|
||||
GithubStarsParticles,
|
||||
type GithubStarsParticlesProps,
|
||||
type GithubStarsProps,
|
||||
useGithubStars,
|
||||
};
|
||||
101
frontend/src/components/animate-ui/primitives/animate/slot.tsx
Normal file
101
frontend/src/components/animate-ui/primitives/animate/slot.tsx
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
"use client";
|
||||
|
||||
import type { HTMLMotionProps } from "motion/react";
|
||||
|
||||
import { isMotionComponent, motion } from "motion/react";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type AnyProps = Record<string, unknown>;
|
||||
|
||||
type DOMMotionProps<T extends HTMLElement = HTMLElement> = Omit<
|
||||
HTMLMotionProps<keyof HTMLElementTagNameMap>,
|
||||
"ref"
|
||||
> & { ref?: React.Ref<T> };
|
||||
|
||||
type WithAsChild<Base extends object>
|
||||
= | (Base & { asChild: true; children: React.ReactElement })
|
||||
| (Base & { asChild?: false | undefined });
|
||||
|
||||
type SlotProps<T extends HTMLElement = HTMLElement> = {
|
||||
children?: any;
|
||||
} & DOMMotionProps<T>;
|
||||
|
||||
function mergeRefs<T>(
|
||||
...refs: (React.Ref<T> | undefined)[]
|
||||
): React.RefCallback<T> {
|
||||
return (node) => {
|
||||
refs.forEach((ref) => {
|
||||
if (!ref)
|
||||
return;
|
||||
if (typeof ref === "function") {
|
||||
ref(node);
|
||||
}
|
||||
else {
|
||||
(ref as React.RefObject<T | null>).current = node;
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function mergeProps<T extends HTMLElement>(
|
||||
childProps: AnyProps,
|
||||
slotProps: DOMMotionProps<T>,
|
||||
): AnyProps {
|
||||
const merged: AnyProps = { ...childProps, ...slotProps };
|
||||
|
||||
if (childProps.className || slotProps.className) {
|
||||
merged.className = cn(
|
||||
childProps.className as string,
|
||||
slotProps.className as string,
|
||||
);
|
||||
}
|
||||
|
||||
if (childProps.style || slotProps.style) {
|
||||
merged.style = {
|
||||
...(childProps.style as React.CSSProperties),
|
||||
...(slotProps.style as React.CSSProperties),
|
||||
};
|
||||
}
|
||||
|
||||
return merged;
|
||||
}
|
||||
|
||||
function Slot<T extends HTMLElement = HTMLElement>({
|
||||
children,
|
||||
ref,
|
||||
...props
|
||||
}: SlotProps<T>) {
|
||||
const isAlreadyMotion
|
||||
= typeof children.type === "object"
|
||||
&& children.type !== null
|
||||
&& isMotionComponent(children.type);
|
||||
|
||||
const Base = React.useMemo(
|
||||
() =>
|
||||
isAlreadyMotion
|
||||
? (children.type as React.ElementType)
|
||||
: motion.create(children.type as React.ElementType),
|
||||
[isAlreadyMotion, children.type],
|
||||
);
|
||||
|
||||
if (!React.isValidElement(children))
|
||||
return null;
|
||||
|
||||
const { ref: childRef, ...childProps } = children.props as AnyProps;
|
||||
|
||||
const mergedProps = mergeProps(childProps, props);
|
||||
|
||||
return (
|
||||
<Base {...mergedProps} ref={mergeRefs(childRef as React.Ref<T>, ref)} />
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
type AnyProps,
|
||||
type DOMMotionProps,
|
||||
Slot,
|
||||
type SlotProps,
|
||||
type WithAsChild,
|
||||
};
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
"use client";
|
||||
|
||||
import type { HTMLMotionProps } from "motion/react";
|
||||
|
||||
import { motion } from "motion/react";
|
||||
import * as React from "react";
|
||||
|
||||
import type { WithAsChild } from "@/components/animate-ui/primitives/animate/slot";
|
||||
|
||||
import { Slot } from "@/components/animate-ui/primitives/animate/slot";
|
||||
|
||||
type ButtonProps = WithAsChild<
|
||||
HTMLMotionProps<"button"> & {
|
||||
hoverScale?: number;
|
||||
tapScale?: number;
|
||||
}
|
||||
>;
|
||||
|
||||
function Button({
|
||||
hoverScale = 1.05,
|
||||
tapScale = 0.95,
|
||||
asChild = false,
|
||||
...props
|
||||
}: ButtonProps) {
|
||||
const Component = asChild ? Slot : motion.button;
|
||||
|
||||
return (
|
||||
<Component
|
||||
whileTap={{ scale: tapScale }}
|
||||
whileHover={{ scale: hoverScale }}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Button, type ButtonProps };
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
"use client";
|
||||
|
||||
import type { HTMLMotionProps } from "motion/react";
|
||||
|
||||
import { AnimatePresence, motion } from "motion/react";
|
||||
import * as React from "react";
|
||||
|
||||
import type { WithAsChild } from "@/components/animate-ui/primitives/animate/slot";
|
||||
import type { UseIsInViewOptions } from "@/hooks/use-is-in-view";
|
||||
|
||||
import { Slot } from "@/components/animate-ui/primitives/animate/slot";
|
||||
import { getStrictContext } from "@/lib/get-strict-context";
|
||||
import {
|
||||
useIsInView,
|
||||
|
||||
} from "@/hooks/use-is-in-view";
|
||||
|
||||
type Side = "top" | "bottom" | "left" | "right";
|
||||
type Align = "start" | "center" | "end";
|
||||
|
||||
type ParticlesContextType = {
|
||||
animate: boolean;
|
||||
isInView: boolean;
|
||||
};
|
||||
|
||||
const [ParticlesProvider, useParticles]
|
||||
= getStrictContext<ParticlesContextType>("ParticlesContext");
|
||||
|
||||
type ParticlesProps = WithAsChild<
|
||||
Omit<HTMLMotionProps<"div">, "children"> & {
|
||||
animate?: boolean;
|
||||
children: React.ReactNode;
|
||||
} & UseIsInViewOptions
|
||||
>;
|
||||
|
||||
function Particles({
|
||||
ref,
|
||||
animate = true,
|
||||
asChild = false,
|
||||
inView = false,
|
||||
inViewMargin = "0px",
|
||||
inViewOnce = true,
|
||||
children,
|
||||
style,
|
||||
...props
|
||||
}: ParticlesProps) {
|
||||
const { ref: localRef, isInView } = useIsInView(
|
||||
ref as React.Ref<HTMLDivElement>,
|
||||
{ inView, inViewOnce, inViewMargin },
|
||||
);
|
||||
|
||||
const Component = asChild ? Slot : motion.div;
|
||||
|
||||
return (
|
||||
<ParticlesProvider value={{ animate, isInView }}>
|
||||
<Component
|
||||
ref={localRef}
|
||||
style={{ position: "relative", ...style }}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Component>
|
||||
</ParticlesProvider>
|
||||
);
|
||||
}
|
||||
|
||||
type ParticlesEffectProps = Omit<HTMLMotionProps<"div">, "children"> & {
|
||||
side?: Side;
|
||||
align?: Align;
|
||||
count?: number;
|
||||
radius?: number;
|
||||
spread?: number;
|
||||
duration?: number;
|
||||
holdDelay?: number;
|
||||
sideOffset?: number;
|
||||
alignOffset?: number;
|
||||
delay?: number;
|
||||
};
|
||||
|
||||
function ParticlesEffect({
|
||||
side = "top",
|
||||
align = "center",
|
||||
count = 6,
|
||||
radius = 30,
|
||||
spread = 360,
|
||||
duration = 0.8,
|
||||
holdDelay = 0.05,
|
||||
sideOffset = 0,
|
||||
alignOffset = 0,
|
||||
delay = 0,
|
||||
transition,
|
||||
style,
|
||||
...props
|
||||
}: ParticlesEffectProps) {
|
||||
const { animate, isInView } = useParticles();
|
||||
|
||||
const isVertical = side === "top" || side === "bottom";
|
||||
const alignPct = align === "start" ? "0%" : align === "end" ? "100%" : "50%";
|
||||
|
||||
const top = isVertical
|
||||
? side === "top"
|
||||
? `calc(0% - ${sideOffset}px)`
|
||||
: `calc(100% + ${sideOffset}px)`
|
||||
: `calc(${alignPct} + ${alignOffset}px)`;
|
||||
|
||||
const left = isVertical
|
||||
? `calc(${alignPct} + ${alignOffset}px)`
|
||||
: side === "left"
|
||||
? `calc(0% - ${sideOffset}px)`
|
||||
: `calc(100% + ${sideOffset}px)`;
|
||||
|
||||
const containerStyle: React.CSSProperties = {
|
||||
position: "absolute",
|
||||
top,
|
||||
left,
|
||||
transform: "translate(-50%, -50%)",
|
||||
};
|
||||
|
||||
const angleStep = (spread * (Math.PI / 180)) / Math.max(1, count - 1);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{animate
|
||||
&& isInView
|
||||
&& Array.from({ length: count }).map((_, i) => {
|
||||
const angle = i * angleStep;
|
||||
const x = Math.cos(angle) * radius;
|
||||
const y = Math.sin(angle) * radius;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={i}
|
||||
style={{ ...containerStyle, ...style }}
|
||||
initial={{ scale: 0, opacity: 0 }}
|
||||
animate={{
|
||||
x: `${x}px`,
|
||||
y: `${y}px`,
|
||||
scale: [0, 1, 0],
|
||||
opacity: [0, 1, 0],
|
||||
}}
|
||||
transition={{
|
||||
duration,
|
||||
delay: delay + i * holdDelay,
|
||||
ease: "easeOut",
|
||||
...transition,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Particles,
|
||||
ParticlesEffect,
|
||||
type ParticlesEffectProps,
|
||||
type ParticlesProps,
|
||||
};
|
||||
|
|
@ -0,0 +1,338 @@
|
|||
"use client";
|
||||
|
||||
import type { MotionValue, SpringOptions } from "motion/react";
|
||||
|
||||
import {
|
||||
motion,
|
||||
|
||||
useMotionValue,
|
||||
useSpring,
|
||||
useTransform,
|
||||
} from "motion/react";
|
||||
import useMeasure from "react-use-measure";
|
||||
import * as React from "react";
|
||||
|
||||
import type { UseIsInViewOptions } from "@/hooks/use-is-in-view";
|
||||
|
||||
import {
|
||||
useIsInView,
|
||||
|
||||
} from "@/hooks/use-is-in-view";
|
||||
|
||||
type SlidingNumberRollerProps = {
|
||||
prevValue: number;
|
||||
value: number;
|
||||
place: number;
|
||||
transition: SpringOptions;
|
||||
delay?: number;
|
||||
};
|
||||
|
||||
function SlidingNumberRoller({
|
||||
prevValue,
|
||||
value,
|
||||
place,
|
||||
transition,
|
||||
delay = 0,
|
||||
}: SlidingNumberRollerProps) {
|
||||
const startNumber = Math.floor(prevValue / place) % 10;
|
||||
const targetNumber = Math.floor(value / place) % 10;
|
||||
const animatedValue = useSpring(startNumber, transition);
|
||||
|
||||
React.useEffect(() => {
|
||||
const timeoutId = setTimeout(() => {
|
||||
animatedValue.set(targetNumber);
|
||||
}, delay);
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [targetNumber, animatedValue, delay]);
|
||||
|
||||
const [measureRef, { height }] = useMeasure();
|
||||
|
||||
return (
|
||||
<span
|
||||
ref={measureRef}
|
||||
data-slot="sliding-number-roller"
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "inline-block",
|
||||
width: "1ch",
|
||||
overflowX: "visible",
|
||||
overflowY: "clip",
|
||||
lineHeight: 1,
|
||||
fontVariantNumeric: "tabular-nums",
|
||||
}}
|
||||
>
|
||||
<span style={{ visibility: "hidden" }}>0</span>
|
||||
{Array.from({ length: 10 }, (_, i) => (
|
||||
<SlidingNumberDisplay
|
||||
key={i}
|
||||
motionValue={animatedValue}
|
||||
number={i}
|
||||
height={height}
|
||||
transition={transition}
|
||||
/>
|
||||
))}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
type SlidingNumberDisplayProps = {
|
||||
motionValue: MotionValue<number>;
|
||||
number: number;
|
||||
height: number;
|
||||
transition: SpringOptions;
|
||||
};
|
||||
|
||||
function SlidingNumberDisplay({
|
||||
motionValue,
|
||||
number,
|
||||
height,
|
||||
transition,
|
||||
}: SlidingNumberDisplayProps) {
|
||||
const y = useTransform(motionValue, (latest) => {
|
||||
if (!height)
|
||||
return 0;
|
||||
const currentNumber = latest % 10;
|
||||
const offset = (10 + number - currentNumber) % 10;
|
||||
let translateY = offset * height;
|
||||
if (offset > 5)
|
||||
translateY -= 10 * height;
|
||||
return translateY;
|
||||
});
|
||||
|
||||
if (!height) {
|
||||
return (
|
||||
<span style={{ visibility: "hidden", position: "absolute" }}>
|
||||
{number}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.span
|
||||
data-slot="sliding-number-display"
|
||||
style={{
|
||||
y,
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
transition={{ ...transition, type: "spring" }}
|
||||
>
|
||||
{number}
|
||||
</motion.span>
|
||||
);
|
||||
}
|
||||
|
||||
type SlidingNumberProps = Omit<React.ComponentProps<"span">, "children"> & {
|
||||
number: number;
|
||||
fromNumber?: number;
|
||||
onNumberChange?: (number: number) => void;
|
||||
padStart?: boolean;
|
||||
decimalSeparator?: string;
|
||||
decimalPlaces?: number;
|
||||
thousandSeparator?: string;
|
||||
transition?: SpringOptions;
|
||||
delay?: number;
|
||||
} & UseIsInViewOptions;
|
||||
|
||||
function SlidingNumber({
|
||||
ref,
|
||||
number,
|
||||
fromNumber,
|
||||
onNumberChange,
|
||||
inView = false,
|
||||
inViewMargin = "0px",
|
||||
inViewOnce = true,
|
||||
padStart = false,
|
||||
decimalSeparator = ".",
|
||||
decimalPlaces = 0,
|
||||
thousandSeparator,
|
||||
transition = { stiffness: 200, damping: 20, mass: 0.4 },
|
||||
delay = 0,
|
||||
...props
|
||||
}: SlidingNumberProps) {
|
||||
const { ref: localRef, isInView } = useIsInView(
|
||||
ref as React.Ref<HTMLElement>,
|
||||
{
|
||||
inView,
|
||||
inViewOnce,
|
||||
inViewMargin,
|
||||
},
|
||||
);
|
||||
|
||||
const prevNumberRef = React.useRef<number>(0);
|
||||
|
||||
const hasAnimated = fromNumber !== undefined;
|
||||
const motionVal = useMotionValue(fromNumber ?? 0);
|
||||
const springVal = useSpring(motionVal, { stiffness: 90, damping: 50 });
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!hasAnimated)
|
||||
return;
|
||||
const timeoutId = setTimeout(() => {
|
||||
if (isInView)
|
||||
motionVal.set(number);
|
||||
}, delay);
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [hasAnimated, isInView, number, motionVal, delay]);
|
||||
|
||||
const [effectiveNumber, setEffectiveNumber] = React.useState(0);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (hasAnimated) {
|
||||
const inferredDecimals
|
||||
= typeof decimalPlaces === "number" && decimalPlaces >= 0
|
||||
? decimalPlaces
|
||||
: (() => {
|
||||
const s = String(number);
|
||||
const idx = s.indexOf(".");
|
||||
return idx >= 0 ? s.length - idx - 1 : 0;
|
||||
})();
|
||||
|
||||
const factor = 10 ** inferredDecimals;
|
||||
|
||||
const unsubscribe = springVal.on("change", (latest: number) => {
|
||||
const newValue
|
||||
= inferredDecimals > 0
|
||||
? Math.round(latest * factor) / factor
|
||||
: Math.round(latest);
|
||||
|
||||
if (effectiveNumber !== newValue) {
|
||||
setEffectiveNumber(newValue);
|
||||
onNumberChange?.(newValue);
|
||||
}
|
||||
});
|
||||
return () => unsubscribe();
|
||||
}
|
||||
else {
|
||||
setEffectiveNumber(!isInView ? 0 : Math.abs(Number(number)));
|
||||
}
|
||||
}, [
|
||||
hasAnimated,
|
||||
springVal,
|
||||
isInView,
|
||||
number,
|
||||
decimalPlaces,
|
||||
onNumberChange,
|
||||
effectiveNumber,
|
||||
]);
|
||||
|
||||
const formatNumber = React.useCallback(
|
||||
(num: number) =>
|
||||
decimalPlaces != null ? num.toFixed(decimalPlaces) : num.toString(),
|
||||
[decimalPlaces],
|
||||
);
|
||||
|
||||
const numberStr = formatNumber(effectiveNumber);
|
||||
const [newIntStrRaw, newDecStrRaw = ""] = numberStr.split(".");
|
||||
|
||||
const finalIntLength = padStart
|
||||
? Math.max(
|
||||
Math.floor(Math.abs(number)).toString().length,
|
||||
newIntStrRaw.length,
|
||||
)
|
||||
: newIntStrRaw.length;
|
||||
|
||||
const newIntStr = padStart
|
||||
? newIntStrRaw.padStart(finalIntLength, "0")
|
||||
: newIntStrRaw;
|
||||
|
||||
const prevFormatted = formatNumber(prevNumberRef.current);
|
||||
const [prevIntStrRaw = "", prevDecStrRaw = ""] = prevFormatted.split(".");
|
||||
const prevIntStr = padStart
|
||||
? prevIntStrRaw.padStart(finalIntLength, "0")
|
||||
: prevIntStrRaw;
|
||||
|
||||
const adjustedPrevInt = React.useMemo(() => {
|
||||
return prevIntStr.length > finalIntLength
|
||||
? prevIntStr.slice(-finalIntLength)
|
||||
: prevIntStr.padStart(finalIntLength, "0");
|
||||
}, [prevIntStr, finalIntLength]);
|
||||
|
||||
const adjustedPrevDec = React.useMemo(() => {
|
||||
if (!newDecStrRaw)
|
||||
return "";
|
||||
return prevDecStrRaw.length > newDecStrRaw.length
|
||||
? prevDecStrRaw.slice(0, newDecStrRaw.length)
|
||||
: prevDecStrRaw.padEnd(newDecStrRaw.length, "0");
|
||||
}, [prevDecStrRaw, newDecStrRaw]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isInView)
|
||||
prevNumberRef.current = effectiveNumber;
|
||||
}, [effectiveNumber, isInView]);
|
||||
|
||||
const intPlaces = React.useMemo(
|
||||
() =>
|
||||
Array.from({ length: finalIntLength }, (_, i) =>
|
||||
10 ** (finalIntLength - i - 1)),
|
||||
[finalIntLength],
|
||||
);
|
||||
const decPlaces = React.useMemo(
|
||||
() =>
|
||||
newDecStrRaw
|
||||
? Array.from({ length: newDecStrRaw.length }, (_, i) =>
|
||||
10 ** (newDecStrRaw.length - i - 1))
|
||||
: [],
|
||||
[newDecStrRaw],
|
||||
);
|
||||
|
||||
const newDecValue = newDecStrRaw ? Number.parseInt(newDecStrRaw, 10) : 0;
|
||||
const prevDecValue = adjustedPrevDec ? Number.parseInt(adjustedPrevDec, 10) : 0;
|
||||
|
||||
return (
|
||||
<span
|
||||
ref={localRef}
|
||||
data-slot="sliding-number"
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{isInView && Number(number) < 0 && (
|
||||
<span style={{ marginRight: "0.25rem" }}>-</span>
|
||||
)}
|
||||
|
||||
{intPlaces.map((place, idx) => {
|
||||
const digitsToRight = intPlaces.length - idx - 1;
|
||||
const isSeparatorPosition
|
||||
= typeof thousandSeparator !== "undefined"
|
||||
&& digitsToRight > 0
|
||||
&& digitsToRight % 3 === 0;
|
||||
|
||||
return (
|
||||
<React.Fragment key={`int-${place}`}>
|
||||
<SlidingNumberRoller
|
||||
prevValue={Number.parseInt(adjustedPrevInt, 10)}
|
||||
value={Number.parseInt(newIntStr ?? "0", 10)}
|
||||
place={place}
|
||||
transition={transition}
|
||||
/>
|
||||
{isSeparatorPosition && <span>{thousandSeparator}</span>}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
|
||||
{newDecStrRaw && (
|
||||
<>
|
||||
<span>{decimalSeparator}</span>
|
||||
{decPlaces.map(place => (
|
||||
<SlidingNumberRoller
|
||||
key={`dec-${place}`}
|
||||
prevValue={prevDecValue}
|
||||
value={newDecValue}
|
||||
place={place}
|
||||
transition={transition}
|
||||
delay={delay}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export { SlidingNumber, type SlidingNumberProps };
|
||||
|
|
@ -7,7 +7,7 @@ import { navbarLinks } from "@/config/site-config";
|
|||
import { Button } from "@/components/ui/button";
|
||||
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
|
||||
import StarOnGithubButton from "./ui/star-on-github-button";
|
||||
import { GitHubStarsButton } from "./animate-ui/components/buttons/github-stars";
|
||||
import { ThemeToggle } from "./ui/theme-toggle";
|
||||
import CommandMenu from "./command-menu";
|
||||
|
||||
|
|
@ -39,31 +39,18 @@ function Navbar() {
|
|||
href="/"
|
||||
className="flex cursor-pointer w-full justify-center sm:justify-start flex-row-reverse items-center gap-2 font-semibold sm:flex-row"
|
||||
>
|
||||
<Image
|
||||
height={18}
|
||||
unoptimized
|
||||
width={18}
|
||||
alt="logo"
|
||||
src="/ProxmoxVE/logo.png"
|
||||
className=""
|
||||
/>
|
||||
<Image height={18} unoptimized width={18} alt="logo" src="/ProxmoxVE/logo.png" className="" />
|
||||
<span className="hidden md:block">Proxmox VE Helper-Scripts</span>
|
||||
</Link>
|
||||
<div className="flex gap-2">
|
||||
<CommandMenu />
|
||||
<StarOnGithubButton />
|
||||
<GitHubStarsButton username="community-scripts" repo="ProxmoxVE" />
|
||||
{navbarLinks.map(({ href, event, icon, text, mobileHidden }) => (
|
||||
<TooltipProvider key={event}>
|
||||
<Tooltip delayDuration={100}>
|
||||
<TooltipTrigger
|
||||
className={mobileHidden ? "hidden lg:block" : ""}
|
||||
>
|
||||
<TooltipTrigger className={mobileHidden ? "hidden lg:block" : ""}>
|
||||
<Button variant="ghost" size="icon" asChild>
|
||||
<Link
|
||||
target="_blank"
|
||||
href={href}
|
||||
data-umami-event={event}
|
||||
>
|
||||
<Link target="_blank" href={href} data-umami-event={event}>
|
||||
{icon}
|
||||
<span className="sr-only">{text}</span>
|
||||
</Link>
|
||||
|
|
|
|||
27
frontend/src/hooks/use-is-in-view.tsx
Normal file
27
frontend/src/hooks/use-is-in-view.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import type { UseInViewOptions } from "motion/react";
|
||||
|
||||
import { useInView } from "motion/react";
|
||||
import * as React from "react";
|
||||
|
||||
type UseIsInViewOptions = {
|
||||
inView?: boolean;
|
||||
inViewOnce?: boolean;
|
||||
inViewMargin?: UseInViewOptions["margin"];
|
||||
};
|
||||
|
||||
function useIsInView<T extends HTMLElement = HTMLElement>(
|
||||
ref: React.Ref<T>,
|
||||
options: UseIsInViewOptions = {},
|
||||
) {
|
||||
const { inView, inViewOnce = false, inViewMargin = "0px" } = options;
|
||||
const localRef = React.useRef<T>(null);
|
||||
React.useImperativeHandle(ref, () => localRef.current as T);
|
||||
const inViewResult = useInView(localRef, {
|
||||
once: inViewOnce,
|
||||
margin: inViewMargin,
|
||||
});
|
||||
const isInView = !inView || inViewResult;
|
||||
return { ref: localRef, isInView };
|
||||
}
|
||||
|
||||
export { useIsInView, type UseIsInViewOptions };
|
||||
36
frontend/src/lib/get-strict-context.tsx
Normal file
36
frontend/src/lib/get-strict-context.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import * as React from "react";
|
||||
|
||||
function getStrictContext<T>(
|
||||
name?: string,
|
||||
): readonly [
|
||||
({
|
||||
value,
|
||||
children,
|
||||
}: {
|
||||
value: T;
|
||||
children?: React.ReactNode;
|
||||
}) => React.JSX.Element,
|
||||
() => T,
|
||||
] {
|
||||
const Context = React.createContext<T | undefined>(undefined);
|
||||
|
||||
const Provider = ({
|
||||
value,
|
||||
children,
|
||||
}: {
|
||||
value: T;
|
||||
children?: React.ReactNode;
|
||||
}) => <Context.Provider value={value}>{children}</Context.Provider>;
|
||||
|
||||
const useSafeContext = () => {
|
||||
const ctx = React.useContext(Context);
|
||||
if (ctx === undefined) {
|
||||
throw new Error(`useContext must be used within ${name ?? "a Provider"}`);
|
||||
}
|
||||
return ctx;
|
||||
};
|
||||
|
||||
return [Provider, useSafeContext] as const;
|
||||
}
|
||||
|
||||
export { getStrictContext };
|
||||
Loading…
Add table
Add a link
Reference in a new issue