import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; import { mostPopularScripts } from "@/config/siteConfig"; import { extractDate } from "@/lib/time"; import { Category, Script } from "@/lib/types"; import { CalendarPlus } from "lucide-react"; import Image from "next/image"; import Link from "next/link"; import { useMemo, useState } from "react"; const ITEMS_PER_PAGE = 3; export const getDisplayValueFromType = (type: string) => { switch (type) { case "ct": return "LXC"; case "vm": return "VM"; case "misc": return ""; default: return ""; } }; export function LatestScripts({ items }: { items: Category[] }) { const [page, setPage] = useState(1); const latestScripts = useMemo(() => { if (!items) return []; const scripts = items.flatMap((category) => category.scripts || []); return scripts.sort( (a, b) => new Date(b.date_created).getTime() - new Date(a.date_created).getTime(), ); }, [items]); const goToNextPage = () => { setPage((prevPage) => prevPage + 1); }; const goToPreviousPage = () => { setPage((prevPage) => prevPage - 1); }; const startIndex = (page - 1) * ITEMS_PER_PAGE; const endIndex = page * ITEMS_PER_PAGE; if (!items) { return null; } return (
{latestScripts.length > 0 && (

Newest Scripts

{page > 1 && (
Previous
)} {endIndex < latestScripts.length && (
{page === 1 ? "More.." : "Next"}
)}
)}
{latestScripts.slice(startIndex, endIndex).map((script) => (

{script.name} {getDisplayValueFromType(script.type)}

{extractDate(script.date_created)}

{script.description}
))}
); } export function MostViewedScripts({ items }: { items: Category[] }) { const mostViewedScripts = items.reduce((acc: Script[], category) => { const foundScripts = category.scripts.filter((script) => mostPopularScripts.includes(script.name), ); return acc.concat(foundScripts); }, []); return (
{mostViewedScripts.length > 0 && ( <>

Most Viewed Scripts

)}
{mostViewedScripts.map((script) => (

{script.name} {getDisplayValueFromType(script.type)}

{extractDate(script.date_created)}

{script.description}
))}
); }