feat: add colors on page

This commit is contained in:
Stefan Imhoff
2023-04-17 20:28:11 +02:00
parent bf0e88df20
commit 44453bdbca
2 changed files with 1509 additions and 16 deletions

1502
src/data/colors-japan.json Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -2,9 +2,10 @@
import GridLayout from '../layouts/GridLayout.astro'; import GridLayout from '../layouts/GridLayout.astro';
import PageTitle from '../components/PageTitle.astro'; import PageTitle from '../components/PageTitle.astro';
import { AmazonBook } from '../components'; import { AmazonBook, ColorSwatch } from '../components';
import { Content as Intro } from '../content/traditional-colors-of-japan/intro.mdx'; import { Content as Intro } from '../content/traditional-colors-of-japan/intro.mdx';
import colors from '../data/colors-japan.json';
import { mapping } from '../mdx-components'; import { mapping } from '../mdx-components';
--- ---
@@ -34,20 +35,10 @@ import { mapping } from '../mdx-components';
</article> </article>
<article class="color-japan-grid col-start-1 col-end-17 grid grid-cols-books gap-[20px]"> <article class="color-japan-grid col-start-1 col-end-17 grid grid-cols-books gap-[20px]">
<div>Color 1</div> {
<div>Color 2</div> colors.map(({ name, description, color }) => (
<div>Color 3</div> <ColorSwatch client:visible color={color} title={name} description={description} />
<div>Color 4</div> ))
<div>Color 5</div> }
<div>Color 6</div>
<div>Color 7</div>
<div>Color 8</div>
<div>Color 9</div>
<div>Color 10</div>
<!--
{% for item in colorsJapan %}
{%- color item.color, item.name, item.description -%}
{% endfor %}
-->
</article> </article>
</GridLayout> </GridLayout>