SquidSpirit
c2462fe537
All checks were successful
Frontend CI / build (push) Successful in 1m6s
### Description
- Change the format of color response
```json
{
"red": 0,
"green": 255,
"blue": 128,
"alpha": 255
}
```
- The relationship between the label's background color and its highlight color is calculated. The method involves first converting the RGB color value to HSL, then decreasing the L (lightness) component, and finally converting it back to RGB.
### Package Changes
```json
{
"zod": "^4.0.5"
}
```
### Screenshots
|Desktop|Mobile|
|-|-|
|||
### Reference
Resolves #44
### Checklist
- [x] A milestone is set
- [x] The related issuse has been linked to this branch
Reviewed-on: #64
Co-authored-by: SquidSpirit <squid@squidspirit.com>
Co-committed-by: SquidSpirit <squid@squidspirit.com>
26 lines
702 B
Svelte
26 lines
702 B
Svelte
<script lang="ts">
|
|
import type { LabelViewModel } from '$lib/post/adapter/presenter/labelViewModel';
|
|
|
|
const { labels }: { labels: readonly LabelViewModel[] } = $props();
|
|
</script>
|
|
|
|
<div class="flex flex-row gap-x-2 text-xs">
|
|
{#each labels.slice(0, 2) as label (label.id)}
|
|
<div
|
|
class="flex flex-row items-center gap-x-1 rounded-full px-2 py-0.5"
|
|
style="background-color: {label.color.hex};"
|
|
>
|
|
<div
|
|
class="size-2 rounded-full"
|
|
style="background-color: {label.color.darken(0.2).hex};"
|
|
></div>
|
|
<span>{label.name}</span>
|
|
</div>
|
|
{/each}
|
|
{#if labels.length > 2}
|
|
<div class="rounded-full bg-gray-200 px-2 py-0.5">
|
|
<span>+{labels.length - 2}</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|