Extract RecentUpdates as reusable component

cgen-1ac451249b4e4fb4a1146f0b424e5e64

client/components/docs/RecentUpdatesSection.tsx

@@ -0,0 +1,97 @@
+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";
+
+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) {
+  return (
+    <div className="mb-12">
+      <div className="flex items-center justify-between mb-6">
+        <h3 className="text-2xl font-bold text-white">Recent Updates</h3>
+        {showViewAll && (
+          <Button
+            asChild
+            variant="outline"
+            size="sm"
+            className="border-slate-600 text-white hover:bg-slate-800"
+          >
+            <Link to="/changelog">View All Updates</Link>
+          </Button>
+        )}
+      </div>
+      <div className="space-y-4">
+        {updates.map((update, index) => (
+          <Card
+            key={index}
+            className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 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="text-white 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="text-gray-400 text-sm">
+                    {update.description}
+                  </p>
+                </div>
+                <div className="text-right">
+                  <p className="text-xs text-gray-500">{update.date}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}