AccessControlModal.svelte 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <script>
  2. import { getContext } from 'svelte';
  3. const i18n = getContext('i18n');
  4. import Modal from '$lib/components/common/Modal.svelte';
  5. import AccessControl from './AccessControl.svelte';
  6. export let show = false;
  7. export let accessControl = null;
  8. export let onChange = () => {};
  9. </script>
  10. <Modal size="sm" bind:show>
  11. <div>
  12. <div class=" flex justify-between dark:text-gray-100 px-5 pt-3 pb-1">
  13. <div class=" text-lg font-medium self-center font-primary">
  14. {$i18n.t('Access Control')}
  15. </div>
  16. <button
  17. class="self-center"
  18. on:click={() => {
  19. show = false;
  20. }}
  21. >
  22. <svg
  23. xmlns="http://www.w3.org/2000/svg"
  24. viewBox="0 0 20 20"
  25. fill="currentColor"
  26. class="w-5 h-5"
  27. >
  28. <path
  29. d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
  30. />
  31. </svg>
  32. </button>
  33. </div>
  34. <div class="w-full px-5 pb-4 dark:text-white">
  35. <AccessControl bind:accessControl {onChange} />
  36. </div>
  37. </div>
  38. </Modal>