File size: 2,056 Bytes
0d21acd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
"use client"
import React from 'react';
import Link from 'next/link';
import { getColorConfig, cn } from '@/lib/utils';
interface CategoryPageProps {
category: {
title: string;
description: string;
colorName: string;
};
}
const CategoryPage: React.FC<CategoryPageProps> = ({ category }) => {
const { title, description, colorName } = category;
const colorConfig = getColorConfig(colorName);
return (
<div className={cn('min-h-screen', colorConfig.bg, colorConfig.text)}>
<div className="container mx-auto px-4 py-8">
<nav className="mb-8">
<ol className="flex items-center space-x-3 text-sm sm:text-base">
<li className="flex items-center">
<Link href="/" className="hover:underline transition-colors duration-200 flex items-center">
<svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
</svg>
Home
</Link>
</li>
<li className="flex items-center">
<svg className="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
</svg>
<span className="ml-2 font-medium">{title}</span>
</li>
</ol>
</nav>
<div className="text-center">
<h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tighter mb-4">
{title}
</h1>
<p className="font-bold font-mono italic text-lg mb-10">
{description}
</p>
</div>
</div>
</div>
);
};
export default CategoryPage; |