mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-09-29 14:06:36 +08:00
ryan
119 lines
2.8 KiB
TypeScript
119 lines
2.8 KiB
TypeScript
/**
|
|
* 圣诞节主题装饰组件归档
|
|
* 包含圣诞树、圣诞帽图标以及下雪效果的集成组件
|
|
*
|
|
* 使用示例：
|
|
* ```tsx
|
|
* import { ChristmasDecorations } from "@/components/layout/avater-style/Christmas"
|
|
*
|
|
* function MyComponent() {
|
|
* const [showChristmas, setShowChristmas] = useState(false)
|
|
*
|
|
* return (
|
|
* <>
|
|
* {showChristmas && <ChristmasDecorations.SnowEffect />}
|
|
* <div onClick={() => setShowChristmas(!showChristmas)}>
|
|
* <ChristmasDecorations.Hat className="w-8 h-8" />
|
|
* <ChristmasDecorations.Tree
|
|
* className="w-12 h-12"
|
|
* show={showChristmas}
|
|
* />
|
|
* </div>
|
|
* </>
|
|
* )
|
|
* }
|
|
* ```
|
|
*/
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import { SnowEffect } from '@/components/ui/snow-effect';
|
|
|
|
/**
|
|
* 圣诞树图标组件
|
|
*/
|
|
export const ChristmasTree = ({
|
|
className,
|
|
show = true,
|
|
}: {
|
|
className?: string;
|
|
show?: boolean;
|
|
}) => (
|
|
<svg
|
|
viewBox='0 0 24 24'
|
|
fill='none'
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
className={cn(
|
|
'transition-all duration-500 ease-out',
|
|
show
|
|
? 'opacity-90 scale-100 translate-y-0'
|
|
: 'opacity-0 scale-50 translate-y-4',
|
|
className,
|
|
)}
|
|
>
|
|
<rect x='10' y='18' width='4' height='4' fill='#92400E' rx='0.5' />
|
|
<path d='M12 4L8 9H16L12 4Z' fill='#15803D' />
|
|
<path d='M12 8L7 14H17L12 8Z' fill='#16A34A' />
|
|
<path d='M12 12L6 19H18L12 12Z' fill='#22C55E' />
|
|
<circle cx='10' cy='10' r='0.8' fill='#EF4444' />
|
|
<circle cx='14' cy='11' r='0.8' fill='#F59E0B' />
|
|
<circle cx='9' cy='15' r='0.8' fill='#3B82F6' />
|
|
<circle cx='15' cy='16' r='0.8' fill='#EF4444' />
|
|
<circle cx='12' cy='14' r='0.8' fill='#F59E0B' />
|
|
<path
|
|
d='M12 2L12.5 3.5L14 4L12.5 4.5L12 6L11.5 4.5L10 4L11.5 3.5L12 2Z'
|
|
fill='#FBBF24'
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
/**
|
|
* 圣诞帽图标组件
|
|
*/
|
|
export const ChristmasHat = ({ className }: { className?: string }) => (
|
|
<svg
|
|
viewBox='0 0 24 24'
|
|
fill='none'
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
className={className}
|
|
>
|
|
<path
|
|
d='M12 3C12 3 5 10 5 15C5 17.5 7 19 8 19H16C17 19 19 17.5 19 15C19 10 12 3 12 3Z'
|
|
fill='#EF4444'
|
|
stroke='#B91C1C'
|
|
strokeWidth='1.5'
|
|
strokeLinecap='round'
|
|
strokeLinejoin='round'
|
|
/>
|
|
<circle
|
|
cx='12'
|
|
cy='3'
|
|
r='2.5'
|
|
fill='white'
|
|
stroke='#E5E7EB'
|
|
strokeWidth='1.5'
|
|
/>
|
|
<rect
|
|
x='4'
|
|
y='16'
|
|
width='16'
|
|
height='5'
|
|
rx='2.5'
|
|
fill='white'
|
|
stroke='#E5E7EB'
|
|
strokeWidth='1.5'
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
/**
|
|
* 圣诞节装饰集合
|
|
* 包含所有圣诞节主题组件的命名空间
|
|
*/
|
|
export const ChristmasDecorations = {
|
|
Tree: ChristmasTree,
|
|
Hat: ChristmasHat,
|
|
SnowEffect: SnowEffect,
|
|
};
|
|
|
|
export default ChristmasDecorations;
|