File size: 2,691 Bytes
cfb0fa4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | <script lang="ts">
import { getContext, onMount } from 'svelte';
const i18n = getContext('i18n');
export let onChange: Function = () => {};
export let state = 'private';
</script>
<div class=" rounded-lg flex flex-col gap-2">
<div class="">
<div class=" text-xs font-medium mb-2.5 text-gray-500">{$i18n.t('Visibility')}</div>
<div class="flex gap-2.5 items-center mb-1">
<div>
<div class=" p-2 bg-black/5 dark:bg-white/5 rounded-full">
{#if state === 'private'}
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
/>
</svg>
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.115 5.19l.319 1.913A6 6 0 008.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 002.288-4.042 1.087 1.087 0 00-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 01-.98-.314l-.295-.295a1.125 1.125 0 010-1.591l.13-.132a1.125 1.125 0 011.3-.21l.603.302a.809.809 0 001.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 001.528-1.732l.146-.292M6.115 5.19A9 9 0 1017.18 4.64M6.115 5.19A8.965 8.965 0 0112 3c1.929 0 3.716.607 5.18 1.64"
/>
</svg>
{/if}
</div>
</div>
<div>
<select
id="models"
class="outline-hidden bg-transparent text-sm font-medium block w-fit pr-10 max-w-full placeholder-gray-400"
value={state === 'private' ? 'private' : 'public'}
on:change={(e) => {
if (e.target.value === 'public') {
state = 'public';
} else {
state = 'private';
}
onChange(state);
}}
>
<option class=" text-gray-700" value="public" selected>{$i18n.t('Public')}</option>
<option class=" text-gray-700" value="private" selected>{$i18n.t('Private')}</option>
</select>
<div class=" text-xs text-gray-400 font-medium">
{#if state === 'private'}
{$i18n.t('Only invited users can access')}
{:else}
{$i18n.t('Visible to all users')}
{/if}
</div>
</div>
</div>
</div>
</div>
|