forked from 77media/video-flow
91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
|
|
interface UserCardProps {
|
|
/** 用户计划名称 */
|
|
plan_name?: string;
|
|
/** 子组件内容 */
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* 用户卡片组件
|
|
* 根据用户级别显示不同的颜色和样式
|
|
*/
|
|
export default function UserCard({
|
|
plan_name = "none",
|
|
children
|
|
}: UserCardProps) {
|
|
// 根据计划名称获取对应的样式
|
|
const getCardStyles = () => {
|
|
switch (plan_name) {
|
|
case "Kickoff":
|
|
return {
|
|
outerBg: "bg-[#3d3c3d]",
|
|
glowColor: "bg-[#c0c0c0]",
|
|
glowShadow: "shadow-[0_0_50px_rgba(192,192,192,0.3)]"
|
|
};
|
|
case "Pro":
|
|
return {
|
|
outerBg: "bg-gradient-to-br from-[#1a1a2e] via-[#16213e] to-[#0f3460]",
|
|
glowColor: "bg-[#4facfe]",
|
|
glowShadow: "shadow-[0_0_50px_rgba(79,172,254,0.4)]"
|
|
};
|
|
case "Ultra":
|
|
return {
|
|
outerBg: "bg-gradient-to-br from-[#0a4a4a] via-[#2a1f4a] to-[#4a0a4a]",
|
|
glowColor: "bg-gradient-to-r from-[rgb(106,244,249)] to-[rgb(199,59,255)]",
|
|
glowShadow: "shadow-[0_0_50px_rgba(106,244,249,0.5)]"
|
|
};
|
|
default: // none
|
|
return {
|
|
outerBg: "bg-[#1a1a1a]",
|
|
glowColor: "bg-[#333]",
|
|
glowShadow: "shadow-[0_0_50px_rgba(51,51,51,0.3)]"
|
|
};
|
|
}
|
|
};
|
|
|
|
const styles = getCardStyles();
|
|
|
|
return (
|
|
<div
|
|
data-alt="user-card-outer"
|
|
className={`relative w-[18.75rem] h-[11.5rem] overflow-hidden rounded-xl ${styles.outerBg} ${styles.glowShadow}`}
|
|
>
|
|
{/* 发光背景 */}
|
|
<div
|
|
className={`absolute w-56 h-48 ${styles.glowColor} blur-[50px] -left-1/2 -top-1/2 opacity-40`}
|
|
/>
|
|
|
|
{/* 卡片内容区域 */}
|
|
<div
|
|
data-alt="user-card"
|
|
className={`relative z-[1] w-full h-full flex items-center justify-center text-white rounded-xl overflow-hidden `}
|
|
style={{ margin: '2px' }}
|
|
>
|
|
{/* 计划名称背景文字 - 非 none 时显示 */}
|
|
{plan_name !== "none" && (
|
|
<div
|
|
data-alt="plan-name-background"
|
|
className="absolute inset-0 flex items-center justify-center z-[1] text-white/10 font-bold text-6xl tracking-wider"
|
|
style={{
|
|
transform: 'rotate(-15deg) scale(1.2)',
|
|
textShadow: '0 0 20px rgba(255,255,255,0.1)'
|
|
}}
|
|
>
|
|
{plan_name}
|
|
</div>
|
|
)}
|
|
|
|
{/* 内容区域 */}
|
|
<div
|
|
data-alt="user-card-content"
|
|
className="relative z-[2] w-full h-full flex flex-col items-center justify-center rounded-xl"
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|