Improve file preview
This commit is contained in:
DrMint
parent
bb47b237c8
commit
7ae3e093a4
|
|
@ -1,4 +1,5 @@
|
|||
---
|
||||
import GenericPreview from "components/Previews/GenericPreview.astro";
|
||||
import { getI18n } from "src/i18n/i18n";
|
||||
import type { EndpointCollectiblePreview } from "src/shared/payload/payload-sdk";
|
||||
|
||||
|
|
@ -9,7 +10,7 @@ interface Props {
|
|||
const { getLocalizedMatch, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
||||
|
||||
const {
|
||||
collectible: { slug, translations, thumbnail },
|
||||
collectible: { slug, translations, thumbnail, tagGroups },
|
||||
} = Astro.props;
|
||||
|
||||
const { title, pretitle, subtitle } = getLocalizedMatch(translations);
|
||||
|
|
@ -17,57 +18,12 @@ const { title, pretitle, subtitle } = getLocalizedMatch(translations);
|
|||
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<a href={getLocalizedUrl(`/collectibles/${slug}`)} class="pressable">
|
||||
{
|
||||
thumbnail && (
|
||||
<img src={thumbnail.url} width={thumbnail.width} height={thumbnail.height} alt="" />
|
||||
)
|
||||
}
|
||||
|
||||
<p>
|
||||
{pretitle && <span id="pretitle">{pretitle} </span>}
|
||||
<span id="title">{title} </span>
|
||||
{subtitle && <span id="subtitle">{subtitle}</span>}
|
||||
</p>
|
||||
</a>
|
||||
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
a {
|
||||
padding: 1em;
|
||||
border-radius: 1em;
|
||||
color: var(--color-base-1000);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 0.8;
|
||||
display: grid;
|
||||
overflow-wrap: anywhere;
|
||||
font-size: clamp(0.5em, 0.35em + 0.75vw, 1em);
|
||||
font-weight: 800;
|
||||
|
||||
& > #pretitle {
|
||||
font-family: var(--font-sans-serifs);
|
||||
font-weight: 400;
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
||||
& > #title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
& > #subtitle {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 600;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<GenericPreview
|
||||
title={title}
|
||||
pretitle={pretitle}
|
||||
subtitle={subtitle}
|
||||
thumbnail={thumbnail}
|
||||
href={getLocalizedUrl(`/collectibles/${slug}`)}
|
||||
tagGroups={tagGroups}
|
||||
disableRoundedTop
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,132 @@
|
|||
---
|
||||
import type { EndpointTagsGroup, PayloadImage } from "src/shared/payload/payload-sdk";
|
||||
import ConditionalWrapper from "../ConditionalWrapper.astro";
|
||||
import Link from "../Link.astro";
|
||||
import InlineTagGroups from "pages/[locale]/collectibles/_components/ContentsSection/InlineTagGroups.astro";
|
||||
|
||||
interface Props {
|
||||
thumbnail?: PayloadImage | undefined;
|
||||
pretitle?: string | undefined;
|
||||
title: string;
|
||||
subtitle?: string | undefined;
|
||||
href?: string | undefined;
|
||||
tagGroups?: EndpointTagsGroup[];
|
||||
disableRoundedTop?: boolean;
|
||||
}
|
||||
|
||||
const {
|
||||
thumbnail,
|
||||
title,
|
||||
pretitle,
|
||||
subtitle,
|
||||
href,
|
||||
tagGroups = [],
|
||||
disableRoundedTop = false,
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<ConditionalWrapper condition={href !== undefined} wrapper={Link} props={{ href: href! }}>
|
||||
<div id="card" class:list={{ "rounded-top": !disableRoundedTop }}>
|
||||
{
|
||||
thumbnail && (
|
||||
<img src={thumbnail.url} width={thumbnail.width} height={thumbnail.height} alt="" />
|
||||
)
|
||||
}
|
||||
|
||||
<div>
|
||||
<p>
|
||||
{pretitle && <span id="pretitle">{pretitle} </span>}
|
||||
<span id="title">{title} </span>
|
||||
{subtitle && <span id="subtitle">{subtitle}</span>}
|
||||
</p>
|
||||
|
||||
{
|
||||
tagGroups.length > 0 && (
|
||||
<>
|
||||
{subtitle && <hr />}
|
||||
<div id="tags">
|
||||
<InlineTagGroups tagGroups={tagGroups} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</ConditionalWrapper>
|
||||
|
||||
<style>
|
||||
#card {
|
||||
box-shadow: 0 1px 2px 0 var(--color-shadow-2);
|
||||
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: color-mix(in srgb, var(--color-elevation-2) 50%, transparent);
|
||||
|
||||
border: 1px solid var(--color-base-300);
|
||||
|
||||
&.rounded-top {
|
||||
border-radius: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
border-bottom-left-radius: 1em;
|
||||
border-bottom-right-radius: 1em;
|
||||
|
||||
transition-duration: 150ms;
|
||||
transition-property: border-color, box-shadow;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-base-650);
|
||||
box-shadow: 0 2px 2px var(--color-shadow-2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: var(--color-base-1000);
|
||||
box-shadow: 0 6px 12px 2px var(--color-shadow-2);
|
||||
}
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
& > div {
|
||||
padding: 1em;
|
||||
padding-top: 1.5em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.2em;
|
||||
|
||||
& > p {
|
||||
line-height: 0.8;
|
||||
display: grid;
|
||||
overflow-wrap: anywhere;
|
||||
font-size: clamp(0.5em, 0.35em + 0.75vw, 1em);
|
||||
font-weight: 800;
|
||||
|
||||
& > #pretitle {
|
||||
font-family: var(--font-sans-serifs);
|
||||
font-weight: 400;
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
||||
& > #title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
& > #subtitle {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 600;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
& > hr {
|
||||
border: none;
|
||||
border-top: 2px dotted var(--color-base-500);
|
||||
width: 100%;
|
||||
margin: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
---
|
||||
import GenericPreview from "components/Previews/GenericPreview.astro";
|
||||
import { getI18n } from "src/i18n/i18n";
|
||||
import type { EndpointPagePreview } from "src/shared/payload/payload-sdk";
|
||||
|
||||
|
|
@ -9,7 +10,7 @@ interface Props {
|
|||
const { getLocalizedMatch, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
||||
|
||||
const {
|
||||
page: { slug, translations, thumbnail },
|
||||
page: { slug, translations, thumbnail, tagGroups },
|
||||
} = Astro.props;
|
||||
|
||||
const { title, pretitle, subtitle } = getLocalizedMatch(translations);
|
||||
|
|
@ -17,57 +18,11 @@ const { title, pretitle, subtitle } = getLocalizedMatch(translations);
|
|||
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<a href={getLocalizedUrl(`/pages/${slug}`)} class="pressable">
|
||||
{
|
||||
thumbnail && (
|
||||
<img src={thumbnail.url} width={thumbnail.width} height={thumbnail.height} alt="" />
|
||||
)
|
||||
}
|
||||
|
||||
<p>
|
||||
{pretitle && <span id="pretitle">{pretitle} </span>}
|
||||
<span id="title">{title} </span>
|
||||
{subtitle && <span id="subtitle">{subtitle}</span>}
|
||||
</p>
|
||||
</a>
|
||||
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
a {
|
||||
padding: 1em;
|
||||
border-radius: 1em;
|
||||
color: var(--color-base-1000);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 0.8;
|
||||
display: grid;
|
||||
overflow-wrap: anywhere;
|
||||
font-size: clamp(0.5em, 0.35em + 0.75vw, 1em);
|
||||
font-weight: 800;
|
||||
|
||||
& > #pretitle {
|
||||
font-family: var(--font-sans-serifs);
|
||||
font-weight: 400;
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
||||
& > #title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
& > #subtitle {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 600;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<GenericPreview
|
||||
title={title}
|
||||
pretitle={pretitle}
|
||||
subtitle={subtitle}
|
||||
thumbnail={thumbnail}
|
||||
href={getLocalizedUrl(`/pages/${slug}`)}
|
||||
tagGroups={tagGroups}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
---
|
||||
import { Icon } from "astro-icon/components";
|
||||
import { getI18n } from "src/i18n/i18n";
|
||||
import type { EndpointTagsGroup } from "src/shared/payload/payload-sdk";
|
||||
|
||||
interface Props {
|
||||
tagGroups: EndpointTagsGroup[];
|
||||
}
|
||||
|
||||
const { tagGroups } = Astro.props;
|
||||
const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
|
||||
---
|
||||
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<div id="tags">
|
||||
{
|
||||
tagGroups.map(({ icon, translations, tags }) => (
|
||||
<div>
|
||||
<Icon name={icon} />
|
||||
<p>{getLocalizedMatch(translations).name}</p>
|
||||
<div>{tags.map(({ translations }) => getLocalizedMatch(translations).name).join(", ")}</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#tags {
|
||||
display: flex;
|
||||
gap: 0.5em 1.5em;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > div {
|
||||
font-weight: 400;
|
||||
font-size: 80%;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
|
||||
& > p {
|
||||
color: var(--color-base-750);
|
||||
}
|
||||
|
||||
& > svg {
|
||||
color: var(--color-base-750);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue