mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-03 15:06:36 +08:00
ryan
98 lines
2.6 KiB
TypeScript
98 lines
2.6 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
|