Added link from content to corresponding library items
This commit is contained in:
DrMint
parent
7446ad3f42
commit
e1cd5424f7
|
|
@ -231,7 +231,7 @@ export function Markdawn(props: Immutable<Props>): JSX.Element {
|
|||
component: (compProps: { children: React.ReactNode }) => (
|
||||
<>
|
||||
<HorizontalLine />
|
||||
<div>{compProps.children}</div>
|
||||
<div className="grid gap-8">{compProps.children}</div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -34,10 +34,11 @@ query getContentText($slug: String, $language_code: String) {
|
|||
}
|
||||
library_item {
|
||||
data {
|
||||
id
|
||||
attributes {
|
||||
slug
|
||||
title
|
||||
subtitle
|
||||
slug
|
||||
thumbnail {
|
||||
data {
|
||||
attributes {
|
||||
|
|
@ -45,6 +46,112 @@ query getContentText($slug: String, $language_code: String) {
|
|||
}
|
||||
}
|
||||
}
|
||||
release_date {
|
||||
...datePicker
|
||||
}
|
||||
price {
|
||||
...pricePicker
|
||||
}
|
||||
categories {
|
||||
data {
|
||||
id
|
||||
attributes {
|
||||
name
|
||||
short
|
||||
}
|
||||
}
|
||||
}
|
||||
metadata {
|
||||
__typename
|
||||
... on ComponentMetadataBooks {
|
||||
subtype {
|
||||
data {
|
||||
attributes {
|
||||
slug
|
||||
titles(
|
||||
filters: {
|
||||
language: { code: { eq: $language_code } }
|
||||
}
|
||||
) {
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
... on ComponentMetadataGame {
|
||||
platforms {
|
||||
data {
|
||||
id
|
||||
attributes {
|
||||
short
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
... on ComponentMetadataVideo {
|
||||
subtype {
|
||||
data {
|
||||
attributes {
|
||||
slug
|
||||
titles(
|
||||
filters: {
|
||||
language: { code: { eq: $language_code } }
|
||||
}
|
||||
) {
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
... on ComponentMetadataAudio {
|
||||
subtype {
|
||||
data {
|
||||
attributes {
|
||||
slug
|
||||
titles(
|
||||
filters: {
|
||||
language: { code: { eq: $language_code } }
|
||||
}
|
||||
) {
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
... on ComponentMetadataGroup {
|
||||
subtype {
|
||||
data {
|
||||
attributes {
|
||||
slug
|
||||
titles(
|
||||
filters: {
|
||||
language: { code: { eq: $language_code } }
|
||||
}
|
||||
) {
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
subitems_type {
|
||||
data {
|
||||
attributes {
|
||||
slug
|
||||
titles(
|
||||
filters: {
|
||||
language: { code: { eq: $language_code } }
|
||||
}
|
||||
) {
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { AppLayout } from "components/AppLayout";
|
||||
import { Chip } from "components/Chip";
|
||||
import { HorizontalLine } from "components/HorizontalLine";
|
||||
import { PreviewCardCTAs } from "components/Library/PreviewCardCTAs";
|
||||
import { Markdawn } from "components/Markdown/Markdawn";
|
||||
import { TOC } from "components/Markdown/TOC";
|
||||
import {
|
||||
|
|
@ -9,7 +10,8 @@ import {
|
|||
} from "components/PanelComponents/ReturnButton";
|
||||
import { ContentPanel } from "components/Panels/ContentPanel";
|
||||
import { SubPanel } from "components/Panels/SubPanel";
|
||||
import { PreviewLine, TranslatedPreviewLine } from "components/PreviewLine";
|
||||
import { PreviewCard } from "components/PreviewCard";
|
||||
import { TranslatedPreviewLine } from "components/PreviewLine";
|
||||
import { RecorderChip } from "components/RecorderChip";
|
||||
import { ThumbnailHeader } from "components/ThumbnailHeader";
|
||||
import { ToolTip } from "components/ToolTip";
|
||||
|
|
@ -19,8 +21,10 @@ import { getNextContent, getPreviousContent } from "helpers/contents";
|
|||
import {
|
||||
prettyinlineTitle,
|
||||
prettyLanguage,
|
||||
prettyItemSubType,
|
||||
prettySlug,
|
||||
} from "helpers/formatters";
|
||||
import { isUntangibleGroupItem } from "helpers/libraryItem";
|
||||
import { getStatusDescription } from "helpers/others";
|
||||
import { ContentWithTranslations, Immutable } from "helpers/types";
|
||||
import { useMediaMobile } from "hooks/useMediaQuery";
|
||||
|
|
@ -38,7 +42,7 @@ interface Props extends AppStaticProps {
|
|||
}
|
||||
|
||||
export default function Content(props: Immutable<Props>): JSX.Element {
|
||||
const { langui, content, languages } = props;
|
||||
const { langui, content, languages, currencies } = props;
|
||||
const isMobile = useMediaMobile();
|
||||
|
||||
const [selectedTranslation, LanguageSwitcher] = useSmartLanguage({
|
||||
|
|
@ -184,6 +188,72 @@ export default function Content(props: Immutable<Props>): JSX.Element {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{content.ranged_contents?.data &&
|
||||
content.ranged_contents.data.length > 0 && (
|
||||
<>
|
||||
<HorizontalLine />
|
||||
<div>
|
||||
{/* TODO: Add to langui */}
|
||||
<p className="font-headers text-2xl">Source</p>
|
||||
<div className="mt-6 grid gap-6 place-items-center text-left">
|
||||
{content.ranged_contents.data.map((rangedContent) => {
|
||||
const libraryItem =
|
||||
rangedContent.attributes?.library_item?.data;
|
||||
if (libraryItem?.attributes && libraryItem.id) {
|
||||
return (
|
||||
<div
|
||||
key={libraryItem.attributes.slug}
|
||||
className="mobile:w-[80%]"
|
||||
>
|
||||
<PreviewCard
|
||||
href={`/library/${libraryItem.attributes.slug}`}
|
||||
title={libraryItem.attributes.title}
|
||||
subtitle={libraryItem.attributes.subtitle}
|
||||
thumbnail={
|
||||
libraryItem.attributes.thumbnail?.data?.attributes
|
||||
}
|
||||
thumbnailAspectRatio="21/29.7"
|
||||
topChips={
|
||||
libraryItem.attributes.metadata &&
|
||||
libraryItem.attributes.metadata.length > 0 &&
|
||||
libraryItem.attributes.metadata[0]
|
||||
? [
|
||||
prettyItemSubType(
|
||||
libraryItem.attributes.metadata[0]
|
||||
),
|
||||
]
|
||||
: []
|
||||
}
|
||||
bottomChips={libraryItem.attributes.categories?.data.map(
|
||||
(category) => category.attributes?.short ?? ""
|
||||
)}
|
||||
metadata={{
|
||||
currencies: currencies,
|
||||
release_date: libraryItem.attributes.release_date,
|
||||
price: libraryItem.attributes.price,
|
||||
position: "Bottom",
|
||||
}}
|
||||
infoAppend={
|
||||
<PreviewCardCTAs
|
||||
id={libraryItem.id}
|
||||
displayCTAs={
|
||||
!isUntangibleGroupItem(
|
||||
libraryItem.attributes.metadata?.[0]
|
||||
)
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <></>;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{selectedTranslation?.text_set?.text && (
|
||||
<>
|
||||
<HorizontalLine />
|
||||
|
|
|
|||
Loading…
Reference in New Issue