web_lib

Common web application libraries
git clone https://radroots.dev/git/web_lib.git
Log | Files | Refs | LICENSE

image-upload-photo-add.svelte (1436B)

      1 <script lang="ts">
      2     import type { LibContext } from "$lib/types/context";
      3     import { get_context, Glyph } from "@radroots/apps-lib";
      4     import LoadSymbol from "../lib/load-symbol.svelte";
      5 
      6     const { ls, lc_photos_add } = get_context<LibContext>(`lib`);
      7 
      8     let {
      9         basis,
     10         photo_path = $bindable(``),
     11     }: {
     12         basis: {
     13             loading?: boolean;
     14         };
     15         photo_path: string;
     16     } = $props();
     17 </script>
     18 
     19 <div class={`relative flex flex-row w-full justify-center items-center`}>
     20     <button
     21         class={`flex flex-row h-[5rem] w-[5rem] justify-center items-center bg-ly1/60 rounded-full`}
     22         onclick={async () => {
     23             const photo_paths_add = await lc_photos_add();
     24             if (photo_paths_add) photo_path = photo_paths_add[0];
     25         }}
     26     >
     27         {#if basis.loading}
     28             <LoadSymbol basis={{ dim: `md` }} />
     29         {:else}
     30             <Glyph
     31                 basis={{
     32                     classes: `text-[40px] text-ly2-gl`,
     33                     dim: `sm`,
     34                     key: `camera`,
     35                 }}
     36             />
     37         {/if}
     38 
     39         <div
     40             class={`absolute -bottom-[1.8rem] flex flex-row justify-start items-center`}
     41         >
     42             <p class={`font-arch font-[600] text-sm text-ly0-gl capitalize`}>
     43                 {`${$ls(`icu.add_*`, { value: `${$ls(`common.photo`)}` })}`}
     44             </p>
     45         </div>
     46     </button>
     47 </div>