CoolChange.AI
8976caaaad
🎯 项目概述 - 一个开源的 AI 工具导航站，帮助用户发现和探索优秀的 AI 工具 - 基于 Next.js 16 + React 19 构建的现代化全栈应用 ✨ 核心功能 - AI 工具目录：分类展示、搜索筛选、工具详情页 - 工具提交：用户可提交新工具，社区驱动 - 管理后台：工具审核、用户管理、角色权限控制 - 博客系统：MDX 驱动，AI 资讯和教程 - 国际化支持：中文/英文双语 (next-intl) - 用户认证：Better Auth + Google OAuth - 深色/浅色主题切换 🛠 技术栈 - 前端：Next.js 16 (App Router) + React 19 + TypeScript - 样式：Tailwind CSS + Framer Motion 动画 - UI 组件：自定义组件库 + Radix UI - 表单验证：React Hook Form + Zod - 数据库：PostgreSQL + Drizzle ORM - 认证：Better Auth (邮箱密码 + Google OAuth) - 邮件：Resend (验证邮件 + Newsletter) - 存储：Cloudflare R2 / AWS S3 兼容 📁 项目结构 - src/app/[locale]/(auth) - 认证页面 - src/app/[locale]/(marketing) - 营销页面 (首页、博客、工具目录) - src/app/[locale]/(protected) - 受保护页面 (仪表板、个人资料) - src/app/[locale]/(admin) - 管理后台 - src/features - 功能模块 - src/lib - 核心业务逻辑 - messages - 国际化翻译文件 🗄 数据库 - 包含 user, session, account, verification, passwordResetToken 等核心表 - 支持 Drizzle ORM 迁移管理 📝 文档 - 完整的 CLAUDE.md 项目指南 - 环境变量配置示例 (.env.example) - MIT 开源许可证
36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
import React from "react";
|
|
|
|
export const Badge: React.FC<
|
|
{ children: React.ReactNode } & React.ComponentPropsWithoutRef<"button">
|
|
> = ({ children, ...props }) => {
|
|
return (
|
|
<button
|
|
{...props}
|
|
className="bg-secondary no-underline group cursor-pointer relative md:shadow-2xl rounded-full p-px text-[10px] sm:text-xs font-semibold leading-6 text-muted-foreground inline-block w-fit mx-auto"
|
|
>
|
|
<span className="absolute inset-0 overflow-hidden rounded-full">
|
|
<span className="absolute inset-0 rounded-full opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
|
</span>
|
|
<div className="relative flex space-x-2 items-center z-10 rounded-full bg-muted py-1.5 px-4 ring-1 ring-border">
|
|
<span>{children}</span>
|
|
<svg
|
|
fill="none"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
width="16"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M10.75 8.75L14.25 12L10.75 15.25"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-muted-foreground/0 via-muted-foreground/90 to-muted-foreground/0 transition-opacity duration-500 group-hover:opacity-40" />
|
|
</button>
|
|
);
|
|
};
|