Initial commit
This commit is contained in:
titver968
57
tatort/src/lib/components/ui/Alert.svelte
Normal file
57
tatort/src/lib/components/ui/Alert.svelte
Normal file
@@ -0,0 +1,57 @@
|
||||
<style>
|
||||
/* Common */
|
||||
.alert {
|
||||
@apply mb-1;
|
||||
@apply border-l-4;
|
||||
@apply text-gray-600;
|
||||
@apply text-sm;
|
||||
@apply px-4;
|
||||
@apply py-2;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@apply h-5;
|
||||
@apply w-5;
|
||||
}
|
||||
|
||||
.content {
|
||||
@apply text-sm;
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.link {
|
||||
@apply whitespace-nowrap;
|
||||
@apply font-bold;
|
||||
}
|
||||
|
||||
.text {
|
||||
@apply border-none;
|
||||
}
|
||||
/* Info */
|
||||
.info {
|
||||
@apply border-blue-400;
|
||||
@apply bg-blue-50;
|
||||
}
|
||||
|
||||
/* Warning */
|
||||
.warning {
|
||||
@apply border-yellow-300;
|
||||
@apply bg-yellow-50;
|
||||
}
|
||||
|
||||
/* Error */
|
||||
.error {
|
||||
@apply border-red-400;
|
||||
@apply bg-red-50;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export let type = 'info';
|
||||
let classNames = '';
|
||||
export { classNames as class };
|
||||
</script>
|
||||
|
||||
<div class="alert {type} {classNames}">
|
||||
<slot />
|
||||
</div>
|
||||
202
tatort/src/lib/components/ui/Button.svelte
Normal file
202
tatort/src/lib/components/ui/Button.svelte
Normal file
@@ -0,0 +1,202 @@
|
||||
<style>
|
||||
.button {
|
||||
@apply inline-flex;
|
||||
@apply items-center;
|
||||
@apply border;
|
||||
@apply font-bold;
|
||||
@apply transition-all;
|
||||
}
|
||||
|
||||
.button:focus {
|
||||
@apply outline-none;
|
||||
@apply ring-2;
|
||||
@apply ring-offset-2;
|
||||
@apply ring-blue-500;
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
@apply opacity-50;
|
||||
@apply cursor-default;
|
||||
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.primary {
|
||||
@apply border-transparent;
|
||||
@apply shadow-sm;
|
||||
@apply text-white;
|
||||
@apply bg-blue-500;
|
||||
}
|
||||
|
||||
.primary:hover:not(.disabled) {
|
||||
@apply bg-blue-400;
|
||||
}
|
||||
|
||||
.primary:active {
|
||||
@apply bg-blue-800;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
@apply border-transparent;
|
||||
@apply text-blue-500;
|
||||
@apply bg-blue-100;
|
||||
}
|
||||
|
||||
.secondary:hover:not(.disabled) {
|
||||
@apply bg-blue-300;
|
||||
}
|
||||
|
||||
.secondary:active {
|
||||
@apply bg-blue-300;
|
||||
}
|
||||
|
||||
.danger {
|
||||
@apply border-transparent;
|
||||
@apply shadow-sm;
|
||||
@apply text-white;
|
||||
@apply bg-red-600;
|
||||
}
|
||||
|
||||
.danger:hover:not(.disabled) {
|
||||
@apply bg-red-700;
|
||||
}
|
||||
|
||||
.danger:active {
|
||||
@apply bg-red-800;
|
||||
}
|
||||
|
||||
.success {
|
||||
@apply border-transparent;
|
||||
@apply shadow-sm;
|
||||
@apply text-white;
|
||||
@apply bg-green-600;
|
||||
}
|
||||
|
||||
.success:hover:not(.disabled) {
|
||||
@apply bg-green-700;
|
||||
}
|
||||
|
||||
.success:active {
|
||||
@apply bg-green-800;
|
||||
}
|
||||
|
||||
.white {
|
||||
@apply border-gray-300;
|
||||
@apply shadow-sm;
|
||||
@apply text-gray-700;
|
||||
@apply bg-white;
|
||||
}
|
||||
|
||||
.white:hover:not(.disabled) {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
|
||||
.white:active {
|
||||
@apply bg-gray-200;
|
||||
}
|
||||
|
||||
.black {
|
||||
@apply shadow-sm;
|
||||
@apply border-none;
|
||||
@apply text-gray-300;
|
||||
@apply bg-black;
|
||||
}
|
||||
|
||||
.black:hover:not(.disabled) {
|
||||
@apply bg-gray-900;
|
||||
}
|
||||
|
||||
.black:active {
|
||||
@apply bg-gray-700;
|
||||
}
|
||||
|
||||
.transparent {
|
||||
@apply border-transparent;
|
||||
@apply text-blue-500;
|
||||
@apply bg-transparent;
|
||||
}
|
||||
|
||||
.transparent:hover:not(.disabled) {
|
||||
@apply bg-blue-300;
|
||||
}
|
||||
|
||||
.transparent:active {
|
||||
@apply bg-blue-300;
|
||||
}
|
||||
|
||||
.xs {
|
||||
@apply px-2.5;
|
||||
@apply py-1.5;
|
||||
@apply text-xs;
|
||||
@apply rounded;
|
||||
}
|
||||
|
||||
.sm {
|
||||
@apply px-3;
|
||||
@apply py-2;
|
||||
@apply text-sm;
|
||||
@apply leading-4;
|
||||
@apply rounded-md;
|
||||
}
|
||||
|
||||
.md {
|
||||
@apply px-4;
|
||||
@apply py-2;
|
||||
@apply text-sm;
|
||||
@apply rounded-md;
|
||||
}
|
||||
|
||||
.lg {
|
||||
@apply px-4;
|
||||
@apply py-2;
|
||||
@apply text-base;
|
||||
@apply rounded-md;
|
||||
}
|
||||
|
||||
.xl {
|
||||
@apply px-6;
|
||||
@apply py-3;
|
||||
@apply text-base;
|
||||
@apply rounded-md;
|
||||
}
|
||||
|
||||
.center {
|
||||
@apply justify-center;
|
||||
}
|
||||
|
||||
.left {
|
||||
@apply justify-start;
|
||||
}
|
||||
|
||||
.right {
|
||||
@apply justify-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export let href = null;
|
||||
export let type = 'button';
|
||||
export let size = 'md';
|
||||
export let variant = 'primary';
|
||||
export let fullWidth = false;
|
||||
export let align = 'center';
|
||||
export let disabled = false;
|
||||
let classNames = '';
|
||||
export { classNames as class };
|
||||
</script>
|
||||
|
||||
{#if href}
|
||||
<a on:click {href} class:w-full={fullWidth} class="button {variant} {size} {classNames} {align}"
|
||||
><slot />
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
on:click
|
||||
{type}
|
||||
{disabled}
|
||||
class:w-full={fullWidth}
|
||||
class="button {variant} {size} {classNames} {align}"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
{/if}
|
||||
70
tatort/src/lib/components/ui/DeleteIconButton.svelte
Normal file
70
tatort/src/lib/components/ui/DeleteIconButton.svelte
Normal file
@@ -0,0 +1,70 @@
|
||||
<style>
|
||||
.icon {
|
||||
@apply text-gray-400;
|
||||
@apply text-right;
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
.icon.active,
|
||||
.icon:hover {
|
||||
@apply text-red-500;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { page } from '$app/stores';
|
||||
import Trash from '$lib/icons/Trash.svelte';
|
||||
import Panel from '$lib/components/ui/Panel.svelte';
|
||||
import Button from '$lib/components/ui/Button.svelte';
|
||||
import { clickOutside } from '$lib/helpers/clickOutside.js';
|
||||
const { adminMode, prediction, predictionRemove } = $page.data;
|
||||
|
||||
let active = false;
|
||||
export let item;
|
||||
|
||||
function remove() {
|
||||
predictionRemove(item);
|
||||
if (adminMode) {
|
||||
const section = $prediction.sections.find((s) => s.id === item.section);
|
||||
section.items = section.items.filter((i) => i !== item);
|
||||
prediction.set($prediction);
|
||||
}
|
||||
}
|
||||
function onClick(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
if (!item.variables.some((v) => v.value?.length > 0)) {
|
||||
remove();
|
||||
return;
|
||||
}
|
||||
active = true;
|
||||
}
|
||||
|
||||
function onConfirm(e) {
|
||||
e.stopPropagation();
|
||||
active = false;
|
||||
remove();
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
active = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex h-8 w-8 items-center justify-center"
|
||||
on:click={onClick}
|
||||
use:clickOutside
|
||||
on:click_outside={cancel}
|
||||
>
|
||||
<span class:active class="icon">
|
||||
<Trash />
|
||||
</span>
|
||||
{#if active}
|
||||
<Panel padding="p-1" class="absolute right-0 top-8 w-64 border border-gray-100 bg-white">
|
||||
<Button variant="danger" size="sm" fullWidth={true} on:click={onConfirm}
|
||||
>Löschen bestätigen</Button
|
||||
>
|
||||
</Panel>
|
||||
{/if}
|
||||
</div>
|
||||
103
tatort/src/lib/components/ui/Modal/Modal.svelte
Normal file
103
tatort/src/lib/components/ui/Modal/Modal.svelte
Normal file
@@ -0,0 +1,103 @@
|
||||
<style>
|
||||
.dialog {
|
||||
@apply inline-block;
|
||||
@apply bg-white;
|
||||
@apply rounded-lg;
|
||||
@apply text-left;
|
||||
@apply overflow-hidden;
|
||||
@apply shadow-xl;
|
||||
@apply transform;
|
||||
@apply transition-all;
|
||||
@apply my-8;
|
||||
|
||||
width: 95%;
|
||||
}
|
||||
.my-max-w-xl {
|
||||
@apply max-w-xl;
|
||||
}
|
||||
.my-max-w-2xl {
|
||||
@apply max-w-2xl;
|
||||
}
|
||||
.my-max-w-3xl {
|
||||
@apply max-w-3xl;
|
||||
}
|
||||
.my-max-w-4xl {
|
||||
@apply max-w-4xl;
|
||||
}
|
||||
.my-max-w-5xl {
|
||||
@apply max-w-5xl;
|
||||
}
|
||||
.my-max-w-6xl {
|
||||
@apply max-w-6xl;
|
||||
}
|
||||
.my-max-w-7xl {
|
||||
@apply max-w-7xl;
|
||||
}
|
||||
.my-align-middle {
|
||||
@apply align-middle;
|
||||
}
|
||||
.h90 {
|
||||
max-height: 90vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { fade } from 'svelte/transition';
|
||||
export let size = 'xl'; // https://tailwindcss.com/docs/max-width#class-reference
|
||||
export let open = false;
|
||||
export let scrollable = true;
|
||||
export let verticalAlign = 'middle';
|
||||
</script>
|
||||
|
||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||
<div
|
||||
class:hidden={!open}
|
||||
class:overflow-y-auto={scrollable}
|
||||
class="fixed inset-0 z-50"
|
||||
in:fade={{ delay: 100 }}
|
||||
out:fade={{ delay: 100 }}
|
||||
>
|
||||
<div
|
||||
class="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"
|
||||
>
|
||||
<!--
|
||||
Background overlay, show/hide based on modal state.
|
||||
|
||||
Entering: "ease-out duration-300"
|
||||
From: "opacity-0"
|
||||
To: "opacity-100"
|
||||
Leaving: "ease-in duration-200"
|
||||
From: "opacity-100"
|
||||
To: "opacity-0"
|
||||
-->
|
||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||
<div class="absolute inset-0 bg-gray-500 opacity-75" />
|
||||
</div>
|
||||
|
||||
<!-- This element is to trick the browser into centering the modal contents. -->
|
||||
<span class="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true"
|
||||
>​</span
|
||||
>
|
||||
<!--
|
||||
Modal panel, show/hide based on modal state.
|
||||
|
||||
Entering: "ease-out duration-300"
|
||||
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
To: "opacity-100 translate-y-0 sm:scale-100"
|
||||
Leaving: "ease-in duration-200"
|
||||
From: "opacity-100 translate-y-0 sm:scale-100"
|
||||
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
-->
|
||||
|
||||
<div
|
||||
class="dialog my-max-w-{size} my-align-{verticalAlign}"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-headline"
|
||||
>
|
||||
<div class="h90 flex flex-col">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
28
tatort/src/lib/components/ui/Modal/ModalContent.svelte
Normal file
28
tatort/src/lib/components/ui/Modal/ModalContent.svelte
Normal file
@@ -0,0 +1,28 @@
|
||||
<style>
|
||||
.content {
|
||||
@apply flex;
|
||||
flex: 1;
|
||||
|
||||
/* max-height: 100vh; */
|
||||
}
|
||||
|
||||
.scroll {
|
||||
@apply overflow-y-auto;
|
||||
}
|
||||
|
||||
.padding {
|
||||
@apply p-6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export let scroll = true;
|
||||
export let padding = true;
|
||||
|
||||
let classNames = '';
|
||||
export { classNames as class };
|
||||
</script>
|
||||
|
||||
<div class="{classNames} content flex-1 text-left" class:scroll class:padding>
|
||||
<slot />
|
||||
</div>
|
||||
3
tatort/src/lib/components/ui/Modal/ModalFooter.svelte
Normal file
3
tatort/src/lib/components/ui/Modal/ModalFooter.svelte
Normal file
@@ -0,0 +1,3 @@
|
||||
<div class="flex flex-row justify-end border-t border-gray-100 px-6 py-3">
|
||||
<slot />
|
||||
</div>
|
||||
5
tatort/src/lib/components/ui/Modal/ModalTitle.svelte
Normal file
5
tatort/src/lib/components/ui/Modal/ModalTitle.svelte
Normal file
@@ -0,0 +1,5 @@
|
||||
<div class="border-b border-gray-100 p-6 text-left">
|
||||
<h3 class="text-lg font-bold leading-6 text-gray-900" id="modal-headline">
|
||||
<slot />
|
||||
</h3>
|
||||
</div>
|
||||
87
tatort/src/lib/components/ui/Notification.svelte
Normal file
87
tatort/src/lib/components/ui/Notification.svelte
Normal file
@@ -0,0 +1,87 @@
|
||||
<script>
|
||||
export let title = 'Erfolgreich';
|
||||
export let show = false;
|
||||
|
||||
let visible = false;
|
||||
|
||||
$: show && startShow();
|
||||
|
||||
function startShow() {
|
||||
if (!show) {
|
||||
return;
|
||||
}
|
||||
visible = true;
|
||||
setTimeout(() => {
|
||||
visible = false;
|
||||
}, 4000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class:hidden={!visible}
|
||||
class="pointer-events-none fixed inset-0 z-50 flex items-end justify-center px-4 py-6 sm:items-start sm:justify-end sm:p-6"
|
||||
>
|
||||
<!--
|
||||
Notification panel, show/hide based on alert state.
|
||||
|
||||
Entering: "transform ease-out duration-300 transition"
|
||||
From: "translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
|
||||
To: "translate-y-0 opacity-100 sm:translate-x-0"
|
||||
Leaving: "transition ease-in duration-100"
|
||||
From: "opacity-100"
|
||||
To: "opacity-0"
|
||||
-->
|
||||
<div
|
||||
class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"
|
||||
>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: outline/check-circle -->
|
||||
<svg
|
||||
class="h-6 w-6 text-green-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3 w-0 flex-1 pt-0.5">
|
||||
<p class="text-sm font-bold text-gray-900">{title}</p>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
<slot />
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-4 flex flex-shrink-0">
|
||||
<button
|
||||
class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
>
|
||||
<span class="sr-only">Close</span>
|
||||
<!-- Heroicon name: solid/x -->
|
||||
<svg
|
||||
class="h-5 w-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
17
tatort/src/lib/components/ui/Panel.svelte
Normal file
17
tatort/src/lib/components/ui/Panel.svelte
Normal file
@@ -0,0 +1,17 @@
|
||||
<style>
|
||||
.panel {
|
||||
@apply overflow-hidden;
|
||||
@apply rounded-lg;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export let padding = 'p-6';
|
||||
export let shadow = true;
|
||||
let classNames = '';
|
||||
export { classNames as class };
|
||||
</script>
|
||||
|
||||
<div class:shadow class="{classNames} panel {padding}">
|
||||
<slot />
|
||||
</div>
|
||||
126
tatort/src/lib/components/ui/Select.svelte
Normal file
126
tatort/src/lib/components/ui/Select.svelte
Normal file
@@ -0,0 +1,126 @@
|
||||
<style>
|
||||
img {
|
||||
width: 'auto';
|
||||
height: 90%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { clickOutside } from '$lib/helpers/clickOutside.js';
|
||||
import Check from '$lib/icons/Check.svelte';
|
||||
import Selector from '$lib/icons/Selector.svelte';
|
||||
import Button from './Button.svelte';
|
||||
|
||||
export let title = 'Bitte wählen';
|
||||
export let options = [];
|
||||
|
||||
export let onChange = null;
|
||||
export let selected = -1;
|
||||
export let disabled = false;
|
||||
|
||||
let classNames = '';
|
||||
export { classNames as class };
|
||||
|
||||
let showOptions = false;
|
||||
|
||||
const selectOnChange = (index) => {
|
||||
setTimeout(() => {
|
||||
hideShowOptions();
|
||||
}, 0);
|
||||
if (typeof onChange == 'function') onChange(index);
|
||||
};
|
||||
|
||||
const toggleShowOptions = () => {
|
||||
showOptions = !showOptions;
|
||||
};
|
||||
|
||||
const hideShowOptions = () => {
|
||||
showOptions = false;
|
||||
};
|
||||
|
||||
$: selected = selected ?? -1;
|
||||
$: selectedItem =
|
||||
selected >= 0
|
||||
? options[selected]
|
||||
: {
|
||||
title,
|
||||
img: null
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class={classNames}>
|
||||
<div use:clickOutside on:click_outside={hideShowOptions} class="relative mt-1">
|
||||
<Button
|
||||
on:click={toggleShowOptions}
|
||||
{disabled}
|
||||
type="button"
|
||||
variant="white"
|
||||
fullWidth
|
||||
align="left"
|
||||
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
|
||||
>
|
||||
<span class="flex h-6 items-center">
|
||||
{#if selectedItem.img}
|
||||
<img src={selectedItem.img} alt={selectedItem.alt} />
|
||||
{/if}
|
||||
<span class="ml-3 block truncate">
|
||||
{selectedItem.title}
|
||||
</span>
|
||||
</span>
|
||||
<span class="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
|
||||
<Selector />
|
||||
</span>
|
||||
</Button>
|
||||
|
||||
<div
|
||||
class:hidden={!showOptions}
|
||||
class="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg"
|
||||
>
|
||||
<ul
|
||||
tabindex="-1"
|
||||
role="listbox"
|
||||
aria-labelledby="listbox-label"
|
||||
class="max-h-48 overflow-auto rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<!--
|
||||
Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
|
||||
|
||||
Highlighted: "text-white bg-indigo-600", Not Highlighted: "text-gray-900"
|
||||
-->
|
||||
{#each options as option, index}
|
||||
<li
|
||||
on:click={() => {
|
||||
selectOnChange(index);
|
||||
}}
|
||||
id="listbox-item-0"
|
||||
role="option"
|
||||
class="group relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:bg-blue-500 hover:text-white"
|
||||
>
|
||||
<div class="flex h-6 items-center">
|
||||
{#if option.img}
|
||||
<img src={option.img} alt={option.alt} />
|
||||
{/if}
|
||||
<!-- Selected: "font-bold", Not Selected: "font-normal" -->
|
||||
<span
|
||||
class:font-bold={selected === index}
|
||||
class:font-normal={!selected === index}
|
||||
class:ml-3={option.img}
|
||||
class="block truncate"
|
||||
>
|
||||
{option.title}
|
||||
</span>
|
||||
</div>
|
||||
{#if selected === index}
|
||||
<span
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-4 text-blue-500 group-hover:text-white"
|
||||
>
|
||||
<Check />
|
||||
</span>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user