diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/AssignLabs/PT.svelte | 32 | ||||
| -rw-r--r-- | src/components/helpers/Icon.svelte | 44 |
2 files changed, 55 insertions, 21 deletions
diff --git a/src/components/AssignLabs/PT.svelte b/src/components/AssignLabs/PT.svelte index 7db84f9..297ee21 100644 --- a/src/components/AssignLabs/PT.svelte +++ b/src/components/AssignLabs/PT.svelte @@ -1,36 +1,26 @@ <script lang="ts"> import type PeerTeacher from "../../models/PeerTeacher"; + import Icon from "../helpers/Icon.svelte"; export let pt: PeerTeacher; </script> <!-- PT Box --> -<div class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black"> +<div + class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden" +> <!-- Top half, name and button --> - <div class="flex flex-row items-center"> + <div class="flex flex-row items-center "> <!-- Left half, name --> <strong class="flex-grow text-sm">{pt.name}</strong> - <!-- Right half, button --> + <!-- Right half, button --> <!-- The button to open modal --> <label for="my-modal-4" class=""> - <svg - on:click={() => console.log(pt.name)} - xmlns="http://www.w3.org/2000/svg" - class="h-6 w-6" - fill="none" - viewBox="0 0 24 24" - stroke="currentColor" - stroke-width={2} - > - <path - stroke-linecap="round" - stroke-linejoin="round" - d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" - /> - </svg> + <Icon name="info" class="h-6 w-6" /> </label> - <input type="checkbox" id="my-modal-4" class="modal-toggle"/> + <!-- Modal PT event info --> + <input type="checkbox" id="my-modal-4" class="modal-toggle" /> <label for="my-modal-4" class="modal cursor-pointer"> <label class="modal-box relative" for=""> <h3 class="text-lg font-bold "> @@ -45,6 +35,6 @@ </label> </div> - <!-- Bottom --> - <div>Hours: {pt.lab_hours}</div> + <!-- Bottom half, hours --> + <div class="">Hours: {pt.lab_hours}</div> </div> diff --git a/src/components/helpers/Icon.svelte b/src/components/helpers/Icon.svelte new file mode 100644 index 0000000..eb430fb --- /dev/null +++ b/src/components/helpers/Icon.svelte @@ -0,0 +1,44 @@ +<script> + export let name; + export let width = "1rem"; + export let height = "1rem"; + export let focusable = false; + let icons = [ + { + box: 24, + name: "plus-circle", + path: `<path + stroke-linecap="round" + stroke-linejoin="round" + d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" + />`, + }, + { + box: 24, + name: "minus-circle", + path: `<path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />`, + }, + { + name: "info", + box: 24, + path: `<path + stroke-linecap="round" + stroke-linejoin="round" + d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" + />`, + }, + ]; + let displayIcon = icons.find((e) => e.name === name); +</script> + +<svg + class={$$props.class} + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 {displayIcon.box} {displayIcon.box}" + stroke="currentColor" + stroke-width={2} + {width} + {height} + {focusable}>{@html displayIcon.path}</svg +> |