109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Link } from "react-router-dom";
|
|
import { useDocsTheme } from "@/contexts/DocsThemeContext";
|
|
|
|
export interface FeaturedUpdate {
|
|
title: string;
|
|
description: string;
|
|
date: string;
|
|
type: string;
|
|
isNew?: boolean;
|
|
}
|
|
|
|
const defaultUpdates: FeaturedUpdate[] = [
|
|
{
|
|
title: "New AI Integration Tutorials",
|
|
description: "Learn how to integrate cutting-edge AI features",
|
|
date: "2 days ago",
|
|
type: "Tutorial",
|
|
isNew: true,
|
|
},
|
|
{
|
|
title: "API v2.1 Documentation",
|
|
description: "Updated API docs with new endpoints and features",
|
|
date: "1 week ago",
|
|
type: "API",
|
|
},
|
|
{
|
|
title: "Performance Best Practices",
|
|
description: "New guide on optimizing application performance",
|
|
date: "2 weeks ago",
|
|
type: "Guide",
|
|
},
|
|
];
|
|
|
|
interface RecentUpdatesSectionProps {
|
|
updates?: FeaturedUpdate[];
|
|
showViewAll?: boolean;
|
|
}
|
|
|
|
export default function RecentUpdatesSection({
|
|
updates = defaultUpdates,
|
|
showViewAll = true,
|
|
}: RecentUpdatesSectionProps) {
|
|
const { colors, theme } = useDocsTheme();
|
|
const viewAllButtonClass =
|
|
theme === "professional"
|
|
? "border-gray-300 text-black hover:bg-gray-100"
|
|
: "border-slate-600 text-white hover:bg-slate-800";
|
|
const hoverBorderColor =
|
|
theme === "professional"
|
|
? "hover:border-gray-400"
|
|
: "hover:border-purple-500/50";
|
|
|
|
return (
|
|
<div className="mb-12">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className={`text-2xl font-bold ${colors.headingColor}`}>
|
|
Recent Updates
|
|
</h3>
|
|
{showViewAll && (
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="sm"
|
|
className={viewAllButtonClass}
|
|
>
|
|
<Link to="/changelog">View All Updates</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div className="space-y-4">
|
|
{updates.map((update, index) => (
|
|
<Card
|
|
key={index}
|
|
className={`${colors.cardBg} border ${colors.cardBorder} ${hoverBorderColor} transition-all duration-300 cursor-pointer`}
|
|
>
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="flex items-center space-x-3 mb-2">
|
|
<h4 className={`${colors.headingColor} font-medium`}>
|
|
{update.title}
|
|
</h4>
|
|
{update.isNew && (
|
|
<Badge className="bg-green-600 text-white text-xs">
|
|
New
|
|
</Badge>
|
|
)}
|
|
<Badge variant="outline" className="text-xs">
|
|
{update.type}
|
|
</Badge>
|
|
</div>
|
|
<p className={`${colors.textMuted} text-sm`}>
|
|
{update.description}
|
|
</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className={`text-xs ${colors.textMuted}`}>{update.date}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|