Fused all the preview cards to one all-encompassing component
This commit is contained in:
DrMint
parent
51f050819e
commit
add0522095
@ -20,7 +20,7 @@ interface Props {
|
|||||||
langui: AppStaticProps["langui"];
|
langui: AppStaticProps["langui"];
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ContentTOCLine(props: Props): JSX.Element {
|
export default function ContentLine(props: Props): JSX.Element {
|
||||||
const { content, langui, parentSlug } = props;
|
const { content, langui, parentSlug } = props;
|
||||||
|
|
||||||
const [opened, setOpened] = useState(false);
|
const [opened, setOpened] = useState(false);
|
||||||
@ -1,61 +0,0 @@
|
|||||||
import Chip from "components/Chip";
|
|
||||||
import Img, { ImageQuality } from "components/Img";
|
|
||||||
import { GetContentsQuery } from "graphql/generated";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { prettySlug } from "queries/helpers";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
item: Exclude<
|
|
||||||
GetContentsQuery["contents"],
|
|
||||||
null | undefined
|
|
||||||
>["data"][number]["attributes"];
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function LibraryContentPreview(props: Props): JSX.Element {
|
|
||||||
const { item } = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link href={`/contents/${item?.slug}`} passHref>
|
|
||||||
<div className="drop-shadow-shade-xl cursor-pointer grid items-end fine:[--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform">
|
|
||||||
{item?.thumbnail?.data?.attributes ? (
|
|
||||||
<Img
|
|
||||||
className="rounded-md coarse:rounded-b-none"
|
|
||||||
image={item.thumbnail.data.attributes}
|
|
||||||
quality={ImageQuality.Medium}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="w-full aspect-[3/2] bg-light rounded-lg"></div>
|
|
||||||
)}
|
|
||||||
<div className="linearbg-obi fine:drop-shadow-shade-lg fine:absolute coarse:rounded-b-md bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
|
|
||||||
<div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
|
|
||||||
{item?.type?.data?.attributes && (
|
|
||||||
<Chip>
|
|
||||||
{item.type.data.attributes.titles?.[0]
|
|
||||||
? item.type.data.attributes.titles[0]?.title
|
|
||||||
: prettySlug(item.type.data.attributes.slug)}
|
|
||||||
</Chip>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{item?.titles?.[0] ? (
|
|
||||||
<>
|
|
||||||
<p>{item.titles[0].pre_title}</p>
|
|
||||||
<h1 className="text-lg">{item.titles[0].title}</h1>
|
|
||||||
<h2>{item.titles[0].subtitle}</h2>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<h1 className="text-lg">{prettySlug(item?.slug)}</h1>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-flow-col gap-1 overflow-x-scroll webkit-scrollbar:w-0 [scrollbar-width:none] place-content-start">
|
|
||||||
{item?.categories?.data.map((category) => (
|
|
||||||
<Chip key={category.id} className="text-sm">
|
|
||||||
{category.attributes?.short}
|
|
||||||
</Chip>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,98 +0,0 @@
|
|||||||
import Chip from "components/Chip";
|
|
||||||
import Img, { ImageQuality } from "components/Img";
|
|
||||||
import { useAppLayout } from "contexts/AppLayoutContext";
|
|
||||||
import {
|
|
||||||
GetLibraryItemQuery,
|
|
||||||
GetLibraryItemsPreviewQuery,
|
|
||||||
} from "graphql/generated";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { AppStaticProps } from "queries/getAppStaticProps";
|
|
||||||
import { prettyDate, prettyItemSubType, prettyPrice } from "queries/helpers";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
className?: string;
|
|
||||||
item:
|
|
||||||
| Exclude<
|
|
||||||
Exclude<
|
|
||||||
Exclude<
|
|
||||||
GetLibraryItemQuery["libraryItems"],
|
|
||||||
null | undefined
|
|
||||||
>["data"][number]["attributes"],
|
|
||||||
null | undefined
|
|
||||||
>["subitems"],
|
|
||||||
null | undefined
|
|
||||||
>["data"][number]["attributes"]
|
|
||||||
| Exclude<
|
|
||||||
GetLibraryItemsPreviewQuery["libraryItems"],
|
|
||||||
null | undefined
|
|
||||||
>["data"][number]["attributes"];
|
|
||||||
currencies: AppStaticProps["currencies"];
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function LibraryItemsPreview(props: Props): JSX.Element {
|
|
||||||
const { item } = props;
|
|
||||||
const appLayout = useAppLayout();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link href={`/library/${item?.slug}`} passHref>
|
|
||||||
<div
|
|
||||||
className={`drop-shadow-shade-xl cursor-pointer grid items-end hover:rounded-3xl fine:[--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform ${props.className}`}
|
|
||||||
>
|
|
||||||
{item?.thumbnail?.data?.attributes ? (
|
|
||||||
<Img
|
|
||||||
image={item.thumbnail.data.attributes}
|
|
||||||
quality={ImageQuality.Small}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="w-full aspect-[21/29.7] bg-light rounded-lg"></div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="linearbg-obi fine:drop-shadow-shade-lg fine:absolute place-items-start bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
|
|
||||||
{item?.metadata && item.metadata.length > 0 && item.metadata[0] && (
|
|
||||||
<div className="flex flex-row gap-1">
|
|
||||||
<Chip>{prettyItemSubType(item.metadata[0])}</Chip>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h2 className="mobile:text-sm text-lg leading-5">{item?.title}</h2>
|
|
||||||
<h3 className="mobile:text-xs leading-3">{item?.subtitle}</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full grid grid-flow-col gap-1 overflow-x-scroll webkit-scrollbar:h-0 [scrollbar-width:none] place-content-start">
|
|
||||||
{item?.categories?.data.map((category) => (
|
|
||||||
<Chip key={category.id} className="text-sm">
|
|
||||||
{category.attributes?.short}
|
|
||||||
</Chip>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{(item?.release_date || item?.price) && (
|
|
||||||
<div className="grid grid-flow-col w-full">
|
|
||||||
{item.release_date && (
|
|
||||||
<p className="mobile:text-xs text-sm">
|
|
||||||
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
|
||||||
event
|
|
||||||
</span>
|
|
||||||
{prettyDate(item.release_date)}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
{item.price && (
|
|
||||||
<p className="mobile:text-xs text-sm justify-self-end">
|
|
||||||
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
|
||||||
shopping_cart
|
|
||||||
</span>
|
|
||||||
{prettyPrice(
|
|
||||||
item.price,
|
|
||||||
props.currencies,
|
|
||||||
appLayout.currency
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
import Chip from "components/Chip";
|
|
||||||
import Img, { ImageQuality } from "components/Img";
|
|
||||||
import { GetPostsPreviewQuery } from "graphql/generated";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { prettyDate, prettySlug } from "queries/helpers";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
post: Exclude<
|
|
||||||
GetPostsPreviewQuery["posts"],
|
|
||||||
null | undefined
|
|
||||||
>["data"][number]["attributes"];
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function PostPreview(props: Props): JSX.Element {
|
|
||||||
const { post } = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link href={`/news/${post?.slug}`} passHref>
|
|
||||||
<div className="drop-shadow-shade-xl cursor-pointer grid items-end hover:scale-[1.02] transition-transform">
|
|
||||||
{post?.thumbnail?.data?.attributes ? (
|
|
||||||
<Img
|
|
||||||
className="rounded-md rounded-b-none"
|
|
||||||
image={post.thumbnail.data.attributes}
|
|
||||||
quality={ImageQuality.Medium}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="w-full aspect-[3/2] bg-light rounded-lg"></div>
|
|
||||||
)}
|
|
||||||
<div className="linearbg-obi fine:drop-shadow-shade-lg rounded-b-md top-full transition-opacity z-20 grid p-4 gap-2">
|
|
||||||
{post?.date && (
|
|
||||||
<div className="grid grid-flow-col w-full">
|
|
||||||
<p className="mobile:text-xs text-sm">
|
|
||||||
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
|
||||||
event
|
|
||||||
</span>
|
|
||||||
{prettyDate(post.date)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
{post?.translations?.[0] ? (
|
|
||||||
<>
|
|
||||||
<h1 className="text-xl">{post.translations[0].title}</h1>
|
|
||||||
<p>{post.translations[0].excerpt}</p>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<h1 className="text-lg">{prettySlug(post?.slug)}</h1>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-flow-col gap-1 overflow-x-scroll webkit-scrollbar:w-0 [scrollbar-width:none] place-content-start">
|
|
||||||
{post?.categories?.data.map((category) => (
|
|
||||||
<Chip key={category.id} className="text-sm">
|
|
||||||
{category.attributes?.short}
|
|
||||||
</Chip>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
193
src/components/ThumbnailPreview.tsx
Normal file
193
src/components/ThumbnailPreview.tsx
Normal file
@ -0,0 +1,193 @@
|
|||||||
|
import { useAppLayout } from "contexts/AppLayoutContext";
|
||||||
|
import {
|
||||||
|
DatePickerFragment,
|
||||||
|
PricePickerFragment,
|
||||||
|
UploadImageFragment,
|
||||||
|
} from "graphql/generated";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { AppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
import {
|
||||||
|
prettyDate,
|
||||||
|
prettyDuration,
|
||||||
|
prettyPrice,
|
||||||
|
prettyShortenNumber,
|
||||||
|
} from "queries/helpers";
|
||||||
|
import Chip from "./Chip";
|
||||||
|
import Img, { ImageQuality } from "./Img";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
thumbnail?: UploadImageFragment | string | null | undefined;
|
||||||
|
thumbnailAspectRatio?: string;
|
||||||
|
href: string;
|
||||||
|
pre_title?: string | null | undefined;
|
||||||
|
title: string | null | undefined;
|
||||||
|
subtitle?: string | null | undefined;
|
||||||
|
description?: string | null | undefined;
|
||||||
|
topChips?: string[];
|
||||||
|
bottomChips?: string[];
|
||||||
|
keepInfoVisible?: boolean;
|
||||||
|
metadata?: {
|
||||||
|
currencies?: AppStaticProps["currencies"];
|
||||||
|
release_date?: DatePickerFragment | null;
|
||||||
|
price?: PricePickerFragment | null;
|
||||||
|
views?: number;
|
||||||
|
author?: string;
|
||||||
|
position: "Bottom" | "Top";
|
||||||
|
};
|
||||||
|
hoverlay?: {
|
||||||
|
__typename: "Video";
|
||||||
|
duration: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ThumbnailPreview(props: Props): JSX.Element {
|
||||||
|
const {
|
||||||
|
href,
|
||||||
|
thumbnail,
|
||||||
|
pre_title,
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
description,
|
||||||
|
topChips,
|
||||||
|
bottomChips,
|
||||||
|
keepInfoVisible,
|
||||||
|
thumbnailAspectRatio,
|
||||||
|
metadata,
|
||||||
|
hoverlay,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const appLayout = useAppLayout();
|
||||||
|
|
||||||
|
const metadataJSX =
|
||||||
|
metadata && (metadata.release_date || metadata.price) ? (
|
||||||
|
<div className="flex flex-row flex-wrap gap-x-3 w-full">
|
||||||
|
{metadata.release_date && (
|
||||||
|
<p className="mobile:text-xs text-sm">
|
||||||
|
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
||||||
|
event
|
||||||
|
</span>
|
||||||
|
{prettyDate(metadata.release_date)}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{metadata.price && metadata.currencies && (
|
||||||
|
<p className="mobile:text-xs text-sm justify-self-end">
|
||||||
|
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
||||||
|
shopping_cart
|
||||||
|
</span>
|
||||||
|
{prettyPrice(
|
||||||
|
metadata.price,
|
||||||
|
metadata.currencies,
|
||||||
|
appLayout.currency
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{metadata.views && (
|
||||||
|
<p className="mobile:text-xs text-sm">
|
||||||
|
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
||||||
|
visibility
|
||||||
|
</span>
|
||||||
|
{prettyShortenNumber(metadata.views)}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{metadata.author && (
|
||||||
|
<p className="mobile:text-xs text-sm">
|
||||||
|
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
||||||
|
person
|
||||||
|
</span>
|
||||||
|
{metadata.author}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link href={href} passHref>
|
||||||
|
<div
|
||||||
|
className="drop-shadow-shade-xl cursor-pointer grid items-end
|
||||||
|
fine:[--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02]
|
||||||
|
[--bg-opacity:0] hover:[--bg-opacity:0.5] [--play-opacity:0]
|
||||||
|
hover:[--play-opacity:100] transition-transform"
|
||||||
|
>
|
||||||
|
{thumbnail ? (
|
||||||
|
<div className="relative">
|
||||||
|
<Img
|
||||||
|
className={
|
||||||
|
keepInfoVisible
|
||||||
|
? "rounded-t-md"
|
||||||
|
: "rounded-md coarse:rounded-b-none"
|
||||||
|
}
|
||||||
|
image={thumbnail}
|
||||||
|
quality={ImageQuality.Medium}
|
||||||
|
/>
|
||||||
|
{hoverlay && hoverlay.__typename === "Video" && (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 text-light grid
|
||||||
|
place-content-center drop-shadow-shade-lg bg-shade
|
||||||
|
bg-opacity-[var(--bg-opacity)] transition-colors"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="material-icons text-6xl
|
||||||
|
opacity-[var(--play-opacity)] transition-opacity"
|
||||||
|
>
|
||||||
|
play_circle_outline
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="absolute right-2 bottom-2 text-light bg-black
|
||||||
|
bg-opacity-60 px-2 rounded-full"
|
||||||
|
>
|
||||||
|
{prettyDuration(hoverlay.duration)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className={`w-full aspect-[${thumbnailAspectRatio}] bg-light ${
|
||||||
|
keepInfoVisible
|
||||||
|
? "rounded-t-md"
|
||||||
|
: "rounded-md coarse:rounded-b-none"
|
||||||
|
}`}
|
||||||
|
></div>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
className={`linearbg-obi ${
|
||||||
|
keepInfoVisible
|
||||||
|
? "-mt-[0.3333em]"
|
||||||
|
: `fine:drop-shadow-shade-lg fine:absolute coarse:rounded-b-md
|
||||||
|
bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)]`
|
||||||
|
} transition-opacity z-20 grid p-4 gap-2`}
|
||||||
|
>
|
||||||
|
{metadata?.position === "Top" && metadataJSX}
|
||||||
|
{topChips && topChips.length > 0 && (
|
||||||
|
<div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
|
||||||
|
{topChips.map((text, index) => (
|
||||||
|
<Chip key={index}>{text}</Chip>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
{pre_title && <p>{pre_title}</p>}
|
||||||
|
{title && <h1 className="text-lg">{title}</h1>}
|
||||||
|
{subtitle && <h2>{subtitle}</h2>}
|
||||||
|
</div>
|
||||||
|
{description && <p>{description}</p>}
|
||||||
|
{bottomChips && bottomChips.length > 0 && (
|
||||||
|
<div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
|
||||||
|
{bottomChips.map((text, index) => (
|
||||||
|
<Chip key={index} className="text-sm">
|
||||||
|
{text}
|
||||||
|
</Chip>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{metadata?.position === "Bottom" && metadataJSX}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,80 +0,0 @@
|
|||||||
import Chip from "components/Chip";
|
|
||||||
import { GetVideosPreviewQuery } from "graphql/generated";
|
|
||||||
import Link from "next/link";
|
|
||||||
import {
|
|
||||||
getVideoThumbnailURL,
|
|
||||||
prettyDate,
|
|
||||||
prettyDuration,
|
|
||||||
prettyShortenNumber,
|
|
||||||
} from "queries/helpers";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
video: Exclude<
|
|
||||||
Exclude<
|
|
||||||
GetVideosPreviewQuery["videos"],
|
|
||||||
null | undefined
|
|
||||||
>["data"][number]["attributes"],
|
|
||||||
null | undefined
|
|
||||||
>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function PostPreview(props: Props): JSX.Element {
|
|
||||||
const { video } = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link href={`/archives/videos/v/${video.uid}`} passHref>
|
|
||||||
<div className="drop-shadow-shade-xl cursor-pointer grid items-end hover:scale-[1.02] [--bg-opacity:0] hover:[--bg-opacity:0.5] [--play-opacity:0] hover:[--play-opacity:100] transition-transform">
|
|
||||||
<div className="relative">
|
|
||||||
<img
|
|
||||||
className="aspect-video rounded-t-lg"
|
|
||||||
src={getVideoThumbnailURL(video.uid)}
|
|
||||||
alt={video.title}
|
|
||||||
/>
|
|
||||||
<div className="absolute inset-0 text-light grid place-content-center drop-shadow-shade-lg bg-shade bg-opacity-[var(--bg-opacity)] transition-colors">
|
|
||||||
<span className="material-icons text-6xl opacity-[var(--play-opacity)] transition-opacity">
|
|
||||||
play_circle_outline
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="absolute right-2 bottom-2 text-light bg-black bg-opacity-60 px-2 rounded-full">
|
|
||||||
{prettyDuration(video.duration)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="linearbg-obi fine:drop-shadow-shade-lg rounded-b-md top-full transition-opacity z-20 grid p-4 gap-2">
|
|
||||||
<div className="flex flex-row flex-wrap gap-x-3 w-full">
|
|
||||||
<p className="mobile:text-xs text-sm">
|
|
||||||
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
|
||||||
event
|
|
||||||
</span>
|
|
||||||
{prettyDate(video.published_date)}
|
|
||||||
</p>
|
|
||||||
<p className="mobile:text-xs text-sm">
|
|
||||||
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
|
||||||
visibility
|
|
||||||
</span>
|
|
||||||
{prettyShortenNumber(video.views)}
|
|
||||||
</p>
|
|
||||||
{video.channel?.data?.attributes && (
|
|
||||||
<p className="mobile:text-xs text-sm">
|
|
||||||
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
|
||||||
person
|
|
||||||
</span>
|
|
||||||
{video.channel.data.attributes.title}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h1 className="text-xl">{video.title}</h1>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-flow-col gap-1 overflow-x-scroll webkit-scrollbar:w-0 [scrollbar-width:none] place-content-start">
|
|
||||||
{video.categories?.data.map((category) => (
|
|
||||||
<Chip key={category.id} className="text-sm">
|
|
||||||
{category.attributes?.short}
|
|
||||||
</Chip>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent";
|
import ChronologyItemComponent from "components/Wiki/Chronology/ChronologyItemComponent";
|
||||||
import { GetChronologyItemsQuery } from "graphql/generated";
|
import { GetChronologyItemsQuery } from "graphql/generated";
|
||||||
import { AppStaticProps } from "queries/getAppStaticProps";
|
import { AppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user