diff options
Diffstat (limited to 'src/components/organisms/KeywordsList.astro')
-rw-r--r-- | src/components/organisms/KeywordsList.astro | 31 |
1 files changed, 31 insertions, 0 deletions
diff --git a/src/components/organisms/KeywordsList.astro b/src/components/organisms/KeywordsList.astro new file mode 100644 index 0000000..4d4b140 --- /dev/null +++ b/src/components/organisms/KeywordsList.astro @@ -0,0 +1,31 @@ +--- +interface Props { + keywords: string[]; +} + +const { keywords } = Astro.props; +--- + +<p> + {keywords.map((x) => <span>#<b>{x}</b></span>)} +</p> + +<style> + p { + display: flex; + flex-direction: row-reverse; + flex-wrap: wrap; + gap: calc(var(--size-0) * 1em); + + & > * { + border-radius: calc(infinity * 1px); + background-color: color-mix( + in srgb, + var(--color-active) 10%, + transparent + ); + color: var(--color-active); + padding-inline: calc(var(--size-2) * 1em); + } + } +</style> |