@getmicdrop/svelte-components 3.1.0 → 4.1.0

package/dist/calendar/AboutShow/AboutShow.svelte

@@ -0,0 +1,177 @@
+<script>
+  import { CloseOutline, LogoInstagram } from '../../primitives/Icons';
+
+  export let performers = [];
+  export let ShowImage = '';
+  export let description = '';
+  export let showTitle = true;
+  export let title = "About the Show";
+  export let showReadMore = true; // Allow controlling read more behavior
+
+  // Function to get image URL - can be overridden via props
+  export let getImageUrl = (url) => url;
+
+  let activePerformer = null;
+  let characterLimit = 1500; // Show much more content before truncating
+  let showFullDescription = false;
+
+  // Filter performers: only show Confirmed (acceptedState === 2) with valid profiles
+  // Note: performerProfile is lowercase in API response
+  $: validPerformers = performers.filter(performer => {
+    const isConfirmed = performer.acceptedState === 2;
+    const isNotHidden = !performer.shouldBeHidden;
+    const profile = performer.RosterPerformer?.User?.performerProfile;
+    const hasName = profile?.firstName || profile?.lastName || profile?.stageName;
+    return isConfirmed && isNotHidden && hasName;
+  });
+
+  function togglePerformer(id) {
+    if (activePerformer === id) {
+      activePerformer = null;
+    } else {
+      activePerformer = id;
+    }
+  }
+
+  function closePerformer() {
+    activePerformer = null;
+  }
+
+  function toggleDescription() {
+    showFullDescription = !showFullDescription;
+  }
+</script>
+
+<div class="flex flex-col gap-3">
+  {#if showTitle}
+    <h2 class="font-medium text-xl text-gray-900 dark:text-white">{title}</h2>
+  {/if}
+
+  {#if ShowImage && description}
+    <div>
+      <img src={ShowImage} alt="" class="rounded-lg object-contain w-full bg-gray-50 dark:bg-gray-800" />
+    </div>
+  {/if}
+
+  <!-- Description -->
+  {#if description}
+    {#if showFullDescription || description.length <= characterLimit || !showReadMore}
+      <p class="text-sm leading-relaxed whitespace-pre-line text-gray-600 dark:text-gray-300">{description}</p>
+      {#if showReadMore && description.length > characterLimit}
+        <button
+          on:click={toggleDescription}
+          class="text-sm font-medium text-left hover:underline text-blue-700 dark:text-blue-500"
+        >
+          Show less
+        </button>
+      {/if}
+    {:else}
+      <p class="text-sm leading-relaxed whitespace-pre-line text-gray-600 dark:text-gray-300">
+        {description.slice(0, characterLimit)}...
+      </p>
+      <button
+        on:click={toggleDescription}
+        class="text-sm font-medium text-left hover:underline text-blue-700 dark:text-blue-500"
+      >
+        Show more
+      </button>
+    {/if}
+  {/if}
+
+  <!-- Performers - always show all, no collapse -->
+  {#if validPerformers.length > 0}
+    <div class="py-2">
+      <!-- Backdrop overlay for bio popup -->
+      {#if activePerformer !== null}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <div class="fixed inset-0 z-40" on:click={closePerformer}></div>
+      {/if}
+
+      <div class="flex flex-wrap justify-start gap-4">
+        {#each validPerformers as performer, index}
+          {@const profile = performer.RosterPerformer?.User?.performerProfile}
+          {@const displayName = profile?.useStageName && profile?.stageName
+            ? profile.stageName
+            : `${profile?.firstName || ''} ${profile?.lastName || ''}`.trim()}
+          {@const firstName = profile?.firstName || displayName.split(' ')[0] || displayName}
+          <div class="relative">
+            {#if activePerformer === performer.ID && !performer.shouldBeHidden}
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <!-- svelte-ignore a11y-no-static-element-interactions -->
+              <div
+                class="w-72 sm:w-80 absolute bottom-full mb-2.5 rounded-lg p-4 z-50 shadow-xl transition-all duration-300 bg-white dark:bg-gray-800 border-2 border-blue-700 dark:border-blue-500 {index === 0 ? 'left-[190%]' : 'left-1/2 -translate-x-1/2'}"
+                on:click|stopPropagation
+              >
+                <!-- Arrow -->
+                <div
+                  class="absolute w-3 h-3 bg-white dark:bg-gray-800 rotate-45 border-r-2 border-b-2 border-blue-700 dark:border-blue-500 -bottom-1.5 {index === 0 ? 'left-[20%]' : 'left-1/2'} -ml-1.5"
+                ></div>
+
+                <button
+                  class="absolute top-2 right-2 p-1 rounded-full transition-colors text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
+                  on:click={closePerformer}
+                  aria-label="Close"
+                >
+                  <CloseOutline class="w-5 h-5" />
+                </button>
+
+                <p class="text-sm leading-relaxed pr-6 text-gray-600 dark:text-gray-300">
+                  {profile?.biography || ''}
+                </p>
+
+                {#if profile?.instagram || profile?.twitter}
+                  <div class="flex gap-2 items-center text-sm mt-3 pt-3 text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-600">
+                    <span>Follow {firstName}:</span>
+                    {#if profile?.instagram}
+                      <a
+                        href={profile.instagram}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="text-blue-700 dark:text-blue-500 hover:opacity-70 transition-opacity"
+                        aria-label="Instagram profile"
+                      >
+                        <LogoInstagram size={20} />
+                      </a>
+                    {/if}
+                    {#if profile?.twitter}
+                      <a
+                        href={profile.twitter}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="text-blue-700 dark:text-blue-500 hover:opacity-70 transition-opacity"
+                        aria-label="Twitter profile"
+                      >
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                          <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
+                        </svg>
+                      </a>
+                    {/if}
+                  </div>
+                {/if}
+              </div>
+            {/if}
+
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <div
+              class="rounded-lg flex flex-col gap-2 p-2 items-center w-24 cursor-pointer transition-all bg-white dark:bg-gray-800 border hover:shadow {activePerformer === performer.ID ? 'border-blue-700 dark:border-blue-500 shadow' : 'border-gray-200 dark:border-gray-600 hover:border-blue-700 dark:hover:border-blue-500'}"
+              on:click={() => togglePerformer(performer.ID)}
+            >
+              <img
+                src={performer.shouldBeHidden ? '' : profile?.profileImage ? getImageUrl(profile.profileImage) : ''}
+                alt={displayName || 'Performer'}
+                class="size-16 rounded object-cover {!profile?.profileImage || performer.shouldBeHidden ? 'bg-gray-50 dark:bg-gray-700' : ''}"
+              />
+              <p class="text-xs text-center leading-tight line-clamp-2 text-gray-600 dark:text-gray-300">
+                {#if !performer.shouldBeHidden}
+                  {displayName}
+                {/if}
+              </p>
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/calendar/AboutShow/AboutShow.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AboutShow.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/AboutShow/AboutShow.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgKA;;;;;;;;;;;;mBAAgN;6CATnK,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}