purp1e
58373a15a9
- 重构主页、关于页、演示页和帖子页的UI，使用现代化的卡片设计和布局 - 添加主题切换功能，支持亮色/暗色模式 - 修复后端认证路由路径，从`/api`改为`/api/auth` - 更新页面标题为"HLAE中文站" - 简化Providers组件，移除未使用的主题配置 - 添加Hero组件展示网站主标题和操作按钮 - 优化登录和注册页面的表单验证和UI - 更新全局样式，添加品牌颜色和主题变量 - 改进导航栏，添加图标和更好的响应式设计 - 优化资源管理模态框，添加图标字段支持
34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
import { Card } from "@heroui/react";
|
|
import { tv, type VariantProps } from "tailwind-variants";
|
|
import React from "react";
|
|
|
|
// Define custom styles
|
|
export const customStyles = tv({
|
|
variants: {
|
|
variant: {
|
|
glass: "bg-white/70 backdrop-blur-md border-white/20 shadow-xl dark:bg-black/70 dark:border-white/10",
|
|
neon: "border border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.5)] bg-gray-900/90 text-white",
|
|
minimal: "border-none shadow-none bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
|
|
modern: "bg-default-50/40 hover:bg-default-100/60 transition-all duration-500 border-none shadow-sm hover:shadow-xl hover:-translate-y-1 rounded-3xl",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "modern",
|
|
}
|
|
});
|
|
|
|
type CustomCardProps = React.ComponentProps<typeof Card> & VariantProps<typeof customStyles>;
|
|
|
|
// Create the custom component
|
|
export function CustomCard({ className, variant, ...props }: CustomCardProps) {
|
|
// Use custom styles and merge with className
|
|
return <Card className={customStyles({ variant, className })} {...props} />;
|
|
}
|
|
|
|
// Attach subcomponents to the custom component for easier usage
|
|
CustomCard.Header = Card.Header;
|
|
CustomCard.Content = Card.Content;
|
|
CustomCard.Footer = Card.Footer;
|
|
CustomCard.Title = Card.Title;
|
|
CustomCard.Description = Card.Description;
|