import React from 'react'; import { IToy, IToysResponse } from '@/lib/toys'; import { IVtuber } from '@/lib/vtubers'; import Link from 'next/link'; import Image from "next/legacy/image"; export interface IToyProps { toy: IToy; } export interface IToysListsProps { vtuber: IVtuber; toys: IToysResponse; page: number; pageSize: number; } // interface VodsListProps { // vtuber: IVtuber; // vods: IVods; // page: number; // pageSize: number; // } export function ToysListHeading({ slug, displayName }: { slug: string, displayName: string }): React.JSX.Element { return (

{displayName}'s Toys

) } // export interface IToy { // id: number; // tags: ITag[]; // linkTag: ITag; // make: string; // model: string; // aspectRatio: string; // image2: string; // } export function ToyItem({ toy }: IToyProps) { const displayName = `${toy.attributes.make} ${toy.attributes.model}`; // if (!toy?.linkTag) return
toy.linkTag is missing which is a problem
return (
{displayName}

{toy.attributes.model}

); }; export function ToysList({ vtuber, toys, page = 1, pageSize = 24 }: IToysListsProps) { return (
{/*
{JSON.stringify(toys, null, 2)} toys:{toys.data.length} page:{page} pageSize:{pageSize}
*/}
{toys.data.map((toy: IToy) => ( //

{JSON.stringify(toy, null, 2)}

))}
) };