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 开源许可证
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { BlogWithSlug } from "@/lib/blog";
|
|
import { IconArrowLeft } from "@tabler/icons-react";
|
|
import { Container } from "./container";
|
|
import Image from "next/image";
|
|
import { Logo } from "./Logo";
|
|
import Link from "next/link";
|
|
import { format } from "date-fns";
|
|
export function BlogLayout({
|
|
blog,
|
|
children,
|
|
}: {
|
|
blog: BlogWithSlug;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<Container className="mt-16 lg:mt-32">
|
|
<div className="flex justify-between items-center px-2 py-8">
|
|
<Link href="/blog" className="flex space-x-2 items-center">
|
|
<IconArrowLeft className="w-4 h-4 text-muted-foreground" />
|
|
<span className="text-sm text-muted-foreground">Back</span>
|
|
</Link>
|
|
<div className="flex space-x-2 items-center">
|
|
<div className="flex space-x-2 items-center ">
|
|
<Image
|
|
src={blog.author.src}
|
|
alt={blog.author.name}
|
|
width={20}
|
|
height={20}
|
|
className="rounded-full h-5 w-5"
|
|
/>
|
|
<p className="text-sm font-normal text-muted-foreground">
|
|
{blog.author.name}
|
|
</p>
|
|
</div>
|
|
<div className="h-5 rounded-lg w-0.5 bg-border" />
|
|
<time dateTime={blog.date} className="flex items-center text-base ">
|
|
<span className="text-muted-foreground text-sm">
|
|
{format(new Date(blog.date), "MMMM dd, yyyy")}
|
|
</span>
|
|
</time>
|
|
</div>
|
|
</div>
|
|
<div className="max-w-4xl mx-auto">
|
|
{blog.image ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={blog.image}
|
|
className="h-40 md:h-96 w-full aspect-square object-cover rounded-3xl"
|
|
alt={blog.title}
|
|
/>
|
|
) : (
|
|
<div className="h-40 md:h-96 w-full aspect-square rounded-3xl shadow-derek bg-card flex items-center justify-center">
|
|
<Logo />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="xl:relative">
|
|
<div className="mx-auto max-w-2xl">
|
|
<article className="pb-8">
|
|
<header className="flex flex-col">
|
|
<h1 className="mt-8 text-4xl font-bold tracking-tight text-foreground sm:text-5xl ">
|
|
{blog.title}
|
|
</h1>
|
|
</header>
|
|
<div
|
|
className="mt-8 prose prose-sm dark:prose-invert"
|
|
data-mdx-content
|
|
>
|
|
{children}
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
);
|
|
}
|