mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-07 08:06:37 +08:00
prettier
This commit is contained in:
@@ -5,9 +5,9 @@ import { motion, type Variants } from 'motion/react';
|
||||
|
||||
import {
|
||||
getVariants,
|
||||
useAnimateIconContext,
|
||||
IconWrapper,
|
||||
type IconProps,
|
||||
IconWrapper,
|
||||
useAnimateIconContext,
|
||||
} from '@/components/animate-ui/icons/icon';
|
||||
|
||||
type CheckProps = IconProps<keyof typeof animations>;
|
||||
@@ -39,23 +39,23 @@ function IconComponent({ size, ...props }: CheckProps) {
|
||||
|
||||
return (
|
||||
<motion.svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
initial="initial"
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
initial='initial'
|
||||
animate={controls}
|
||||
{...props}
|
||||
>
|
||||
<motion.path
|
||||
d="m4 12 5 5L20 6"
|
||||
d='m4 12 5 5L20 6'
|
||||
variants={variants.path}
|
||||
initial="initial"
|
||||
initial='initial'
|
||||
animate={controls}
|
||||
/>
|
||||
</motion.svg>
|
||||
|
||||
@@ -5,9 +5,9 @@ import { motion, type Variants } from 'motion/react';
|
||||
|
||||
import {
|
||||
getVariants,
|
||||
useAnimateIconContext,
|
||||
IconWrapper,
|
||||
type IconProps,
|
||||
IconWrapper,
|
||||
useAnimateIconContext,
|
||||
} from '@/components/animate-ui/icons/icon';
|
||||
|
||||
type ChevronDownProps = IconProps<keyof typeof animations>;
|
||||
@@ -44,21 +44,21 @@ function IconComponent({ size, ...props }: ChevronDownProps) {
|
||||
|
||||
return (
|
||||
<motion.svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
{...props}
|
||||
>
|
||||
<motion.path
|
||||
d="m6 9 6 6 6-6"
|
||||
d='m6 9 6 6 6-6'
|
||||
variants={variants.path}
|
||||
initial="initial"
|
||||
initial='initial'
|
||||
animate={controls}
|
||||
/>
|
||||
</motion.svg>
|
||||
|
||||
@@ -5,9 +5,9 @@ import { motion, type Variants } from 'motion/react';
|
||||
|
||||
import {
|
||||
getVariants,
|
||||
useAnimateIconContext,
|
||||
IconWrapper,
|
||||
type IconProps,
|
||||
IconWrapper,
|
||||
useAnimateIconContext,
|
||||
} from '@/components/animate-ui/icons/icon';
|
||||
|
||||
type ChevronLeftProps = IconProps<keyof typeof animations>;
|
||||
@@ -44,21 +44,21 @@ function IconComponent({ size, ...props }: ChevronLeftProps) {
|
||||
|
||||
return (
|
||||
<motion.svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
{...props}
|
||||
>
|
||||
<motion.path
|
||||
d="m15 18-6-6 6-6"
|
||||
d='m15 18-6-6 6-6'
|
||||
variants={variants.path}
|
||||
initial="initial"
|
||||
initial='initial'
|
||||
animate={controls}
|
||||
/>
|
||||
</motion.svg>
|
||||
|
||||
@@ -5,9 +5,9 @@ import { motion, type Variants } from 'motion/react';
|
||||
|
||||
import {
|
||||
getVariants,
|
||||
useAnimateIconContext,
|
||||
IconWrapper,
|
||||
type IconProps,
|
||||
IconWrapper,
|
||||
useAnimateIconContext,
|
||||
} from '@/components/animate-ui/icons/icon';
|
||||
|
||||
type ChevronRightProps = IconProps<keyof typeof animations>;
|
||||
@@ -44,21 +44,21 @@ function IconComponent({ size, ...props }: ChevronRightProps) {
|
||||
|
||||
return (
|
||||
<motion.svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
{...props}
|
||||
>
|
||||
<motion.path
|
||||
d="m9 18 6-6-6-6"
|
||||
d='m9 18 6-6-6-6'
|
||||
variants={variants.path}
|
||||
initial="initial"
|
||||
initial='initial'
|
||||
animate={controls}
|
||||
/>
|
||||
</motion.svg>
|
||||
|
||||
@@ -5,9 +5,9 @@ import { motion, type Variants } from 'motion/react';
|
||||
|
||||
import {
|
||||
getVariants,
|
||||
useAnimateIconContext,
|
||||
IconWrapper,
|
||||
type IconProps,
|
||||
IconWrapper,
|
||||
useAnimateIconContext,
|
||||
} from '@/components/animate-ui/icons/icon';
|
||||
|
||||
type CircleCheckProps = IconProps<keyof typeof animations>;
|
||||
@@ -40,29 +40,29 @@ function IconComponent({ size, ...props }: CircleCheckProps) {
|
||||
|
||||
return (
|
||||
<motion.svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
{...props}
|
||||
>
|
||||
<motion.circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
cx='12'
|
||||
cy='12'
|
||||
r='10'
|
||||
variants={variants.circle}
|
||||
initial="initial"
|
||||
initial='initial'
|
||||
animate={controls}
|
||||
/>
|
||||
<motion.path
|
||||
d="m9 12 2 2 4-4"
|
||||
d='m9 12 2 2 4-4'
|
||||
variants={variants.path}
|
||||
initial="initial"
|
||||
initial='initial'
|
||||
animate={controls}
|
||||
/>
|
||||
</motion.svg>
|
||||
|
||||
@@ -2,18 +2,21 @@
|
||||
|
||||
import * as React from 'react';
|
||||
import {
|
||||
motion,
|
||||
useAnimation,
|
||||
type SVGMotionProps,
|
||||
type UseInViewOptions,
|
||||
type LegacyAnimationControls,
|
||||
type Variants,
|
||||
type HTMLMotionProps,
|
||||
type LegacyAnimationControls,
|
||||
motion,
|
||||
type SVGMotionProps,
|
||||
useAnimation,
|
||||
type UseInViewOptions,
|
||||
type Variants,
|
||||
} from 'motion/react';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useIsInView } from '@/hooks/use-is-in-view';
|
||||
import { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';
|
||||
import {
|
||||
Slot,
|
||||
type WithAsChild,
|
||||
} from '@/components/animate-ui/primitives/animate/slot';
|
||||
|
||||
const staticAnimations = {
|
||||
path: {
|
||||
|
||||
@@ -5,9 +5,9 @@ import { motion, type Variants } from 'motion/react';
|
||||
|
||||
import {
|
||||
getVariants,
|
||||
useAnimateIconContext,
|
||||
IconWrapper,
|
||||
type IconProps,
|
||||
IconWrapper,
|
||||
useAnimateIconContext,
|
||||
} from '@/components/animate-ui/icons/icon';
|
||||
|
||||
type SendProps = IconProps<keyof typeof animations>;
|
||||
@@ -50,28 +50,28 @@ function IconComponent({ size, ...props }: SendProps) {
|
||||
|
||||
return (
|
||||
<motion.svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
{...props}
|
||||
>
|
||||
<motion.g variants={variants.group} initial="initial" animate={controls}>
|
||||
<motion.g variants={variants.group} initial='initial' animate={controls}>
|
||||
<motion.path
|
||||
d="M14.5,21.7c.1.3.4.4.7.3.1,0,.2-.2.3-.3L22,2.7c0-.3,0-.5-.3-.6-.1,0-.2,0-.3,0L2.3,8.5c-.3,0-.4.4-.3.6,0,.1.2.2.3.3l7.9,3.2c.5.2.9.6,1.1,1.1l3.2,7.9Z"
|
||||
d='M14.5,21.7c.1.3.4.4.7.3.1,0,.2-.2.3-.3L22,2.7c0-.3,0-.5-.3-.6-.1,0-.2,0-.3,0L2.3,8.5c-.3,0-.4.4-.3.6,0,.1.2.2.3.3l7.9,3.2c.5.2.9.6,1.1,1.1l3.2,7.9Z'
|
||||
variants={variants.path1}
|
||||
initial="initial"
|
||||
initial='initial'
|
||||
animate={controls}
|
||||
/>
|
||||
<motion.path
|
||||
d="M21.9,2.1l-10.9,10.9"
|
||||
d='M21.9,2.1l-10.9,10.9'
|
||||
variants={variants.path2}
|
||||
initial="initial"
|
||||
initial='initial'
|
||||
animate={controls}
|
||||
/>
|
||||
</motion.g>
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { motion, type HTMLMotionProps } from 'motion/react';
|
||||
import { type HTMLMotionProps, motion } from 'motion/react';
|
||||
|
||||
import { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';
|
||||
import {
|
||||
Slot,
|
||||
type WithAsChild,
|
||||
} from '@/components/animate-ui/primitives/animate/slot';
|
||||
|
||||
type ButtonProps = WithAsChild<
|
||||
HTMLMotionProps<'button'> & {
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { motion, type HTMLMotionProps } from 'motion/react';
|
||||
import { type HTMLMotionProps, motion } from 'motion/react';
|
||||
|
||||
import { getStrictContext } from '@/lib/utils/get-strict-context';
|
||||
import { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';
|
||||
import {
|
||||
Slot,
|
||||
type WithAsChild,
|
||||
} from '@/components/animate-ui/primitives/animate/slot';
|
||||
|
||||
type Ripple = {
|
||||
id: number;
|
||||
@@ -80,7 +83,7 @@ function RippleButton({
|
||||
<RippleButtonProvider value={{ ripples, setRipples }}>
|
||||
<Component
|
||||
ref={buttonRef}
|
||||
data-slot="ripple-button"
|
||||
data-slot='ripple-button'
|
||||
onClick={handleClick}
|
||||
whileTap={{ scale: tapScale }}
|
||||
whileHover={{ scale: hoverScale }}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import * as React from 'react';
|
||||
import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
|
||||
import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
|
||||
import { AnimatePresence, type HTMLMotionProps, motion } from 'motion/react';
|
||||
|
||||
import { getStrictContext } from '@/lib/utils/get-strict-context';
|
||||
import { useControlledState } from '@/hooks/use-controlled-state';
|
||||
@@ -27,7 +27,7 @@ function Collapsible(props: CollapsibleProps) {
|
||||
return (
|
||||
<CollapsibleProvider value={{ isOpen, setIsOpen }}>
|
||||
<CollapsiblePrimitive.Root
|
||||
data-slot="collapsible"
|
||||
data-slot='collapsible'
|
||||
{...props}
|
||||
onOpenChange={setIsOpen}
|
||||
/>
|
||||
@@ -41,7 +41,7 @@ type CollapsibleTriggerProps = React.ComponentProps<
|
||||
|
||||
function CollapsibleTrigger(props: CollapsibleTriggerProps) {
|
||||
return (
|
||||
<CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
|
||||
<CollapsiblePrimitive.Trigger data-slot='collapsible-trigger' {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
@@ -65,8 +65,8 @@ function CollapsibleContent({
|
||||
{keepRendered ? (
|
||||
<CollapsiblePrimitive.Content asChild forceMount>
|
||||
<motion.div
|
||||
key="collapsible-content"
|
||||
data-slot="collapsible-content"
|
||||
key='collapsible-content'
|
||||
data-slot='collapsible-content'
|
||||
layout
|
||||
initial={{ opacity: 0, height: 0, overflow: 'hidden', y: 20 }}
|
||||
animate={
|
||||
@@ -82,8 +82,8 @@ function CollapsibleContent({
|
||||
isOpen && (
|
||||
<CollapsiblePrimitive.Content asChild forceMount>
|
||||
<motion.div
|
||||
key="collapsible-content"
|
||||
data-slot="collapsible-content"
|
||||
key='collapsible-content'
|
||||
data-slot='collapsible-content'
|
||||
layout
|
||||
initial={{ opacity: 0, height: 0, overflow: 'hidden', y: 20 }}
|
||||
animate={{ opacity: 1, height: 'auto', overflow: 'hidden', y: 0 }}
|
||||
|
||||
@@ -3,10 +3,7 @@
|
||||
import * as React from 'react';
|
||||
import { useMotionValue, useSpring, type SpringOptions } from 'motion/react';
|
||||
|
||||
import {
|
||||
useIsInView,
|
||||
type UseIsInViewOptions,
|
||||
} from '@/hooks/use-is-in-view';
|
||||
import { useIsInView, type UseIsInViewOptions } from '@/hooks/use-is-in-view';
|
||||
|
||||
type CountingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {
|
||||
number: number;
|
||||
@@ -81,7 +78,7 @@ function CountingNumber({
|
||||
const [intPart, fracPart] = formatted.split(decimalSeparator);
|
||||
const paddedInt = intPart?.padStart(finalIntLength, '0') ?? '';
|
||||
formatted = fracPart
|
||||
? `${ paddedInt }${ decimalSeparator }${ fracPart }`
|
||||
? `${paddedInt}${decimalSeparator}${fracPart}`
|
||||
: paddedInt;
|
||||
}
|
||||
|
||||
@@ -90,7 +87,7 @@ function CountingNumber({
|
||||
const regex = /\B(?=(\d{3})+(?!\d))/g;
|
||||
const separatedInt = intPart.replace(regex, thousandSeparator);
|
||||
formatted = fracPart
|
||||
? `${ separatedInt }${ decimalSeparator }${ fracPart }`
|
||||
? `${separatedInt}${decimalSeparator}${fracPart}`
|
||||
: separatedInt;
|
||||
}
|
||||
|
||||
@@ -98,7 +95,15 @@ function CountingNumber({
|
||||
}
|
||||
});
|
||||
return () => unsubscribe();
|
||||
}, [springVal, decimals, padStart, number, decimalSeparator, localRef, thousandSeparator]);
|
||||
}, [
|
||||
springVal,
|
||||
decimals,
|
||||
padStart,
|
||||
number,
|
||||
decimalSeparator,
|
||||
localRef,
|
||||
thousandSeparator,
|
||||
]);
|
||||
|
||||
const finalIntLength = Math.floor(Math.abs(number)).toString().length;
|
||||
|
||||
@@ -108,26 +113,28 @@ function CountingNumber({
|
||||
if (padStart) {
|
||||
const [intPart, fracPart] = out.split(decimalSeparator);
|
||||
const paddedInt = (intPart ?? '').padStart(finalIntLength, '0');
|
||||
out = fracPart ? `${ paddedInt }${ decimalSeparator }${ fracPart }` : paddedInt;
|
||||
out = fracPart ? `${paddedInt}${decimalSeparator}${fracPart}` : paddedInt;
|
||||
}
|
||||
if (thousandSeparator) {
|
||||
const [intPart, fracPart] = out.split(decimalSeparator);
|
||||
const regex = /\B(?=(\d{3})+(?!\d))/g;
|
||||
const separatedInt = intPart.replace(regex, thousandSeparator);
|
||||
out = fracPart ? `${ separatedInt }${ decimalSeparator }${ fracPart }` : separatedInt;
|
||||
out = fracPart
|
||||
? `${separatedInt}${decimalSeparator}${fracPart}`
|
||||
: separatedInt;
|
||||
}
|
||||
return out;
|
||||
};
|
||||
|
||||
const zeroText = padStart
|
||||
? '0'.padStart(finalIntLength, '0') +
|
||||
(decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '')
|
||||
(decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '')
|
||||
: '0' + (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '');
|
||||
|
||||
const initialText = initiallyStable ? formatValue(number) : zeroText;
|
||||
|
||||
return (
|
||||
<span ref={localRef} data-slot="counting-number" {...props}>
|
||||
<span ref={localRef} data-slot='counting-number' {...props}>
|
||||
{initialText}
|
||||
</span>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user