Investidor-V2/resources/js/pages/funding/saved.tsx

import { Link, router } from '@inertiajs/react';
import { Frame, card, button } from '@/pages/investment/shared';

type SavedProgramme = {
    id: string;
    title: string;
    saved_version: number;
    saved_at: string;
    available: boolean;
    current_version: number | null;
};
export default function Saved({
    items,
}: {
    items: {
        data: SavedProgramme[];
        links: { url: string | null; label: string; active: boolean }[];
    };
}) {
    return (
        <Frame title="Programas que guardei">
            <Link className="underline" href="/fundos">
                Consultar fundos e programas
            </Link>
            <p>
                Referências privadas aos programas que seleccionou. Guardar
                interesse não envia candidatura nem reserva financiamento.
            </p>
            {items.data.length === 0 && (
                <p>Ainda não tem programas guardados.</p>
            )}
            {items.data.map((item) => (
                <article key={item.id} className={card}>
                    <h2 className="text-xl font-semibold">{item.title}</h2>
                    <p>Guardado na versão {item.saved_version}.</p>
                    {item.available ? (
                        <>
                            <Link
                                className="underline"
                                href={`/fundos/${item.id}`}
                            >
                                Consultar ficha publicada
                            </Link>
                            {item.current_version !== item.saved_version && (
                                <p>
                                    Existe uma versão pública diferente:{' '}
                                    {item.current_version}. A referência
                                    guardada conserva a versão que seleccionou.
                                </p>
                            )}
                        </>
                    ) : (
                        <p>
                            A ficha já não está disponível publicamente. A sua
                            referência guardada foi conservada.
                        </p>
                    )}
                    <div className="mt-3">
                        <button
                            className={button}
                            onClick={() =>
                                router.delete(`/fundos/${item.id}/interesse`)
                            }
                        >
                            Remover da minha lista
                        </button>
                    </div>
                </article>
            ))}
            <nav
                aria-label="Páginas de programas guardados"
                className="flex gap-3"
            >
                {items.links.map((link, index) =>
                    link.url ? (
                        <Link
                            key={index}
                            href={link.url}
                            aria-current={link.active ? 'page' : undefined}
                            className="underline"
                        >
                            {link.label
                                .replace(/&laquo;/g, '«')
                                .replace(/&raquo;/g, '»')}
                        </Link>
                    ) : null,
                )}
            </nav>
        </Frame>
    );
}