@explorer-1/vue 0.0.0

package/src/components/HomepageStats/HomepageStats.vue

@@ -0,0 +1,362 @@
+<template>
+  <section
+    v-if="statistics || dsn || asteroidWatch || missionCount"
+    aria-label="Featured mission statistics"
+    class="HomepageStats -mt-14 relative z-20 overflow-hidden"
+  >
+    <div class="MixedBleedGrid lg:pl-0 pl-4">
+      <div
+        class="bg-gray-light text-gray-dark col-start-container col-end-container lg:py-18 lg:px-0 text-body-lg px-8 py-10 pr-0"
+      >
+        <div class="gap-y-10 lg:col-end-9 grid grid-cols-12 gap-6">
+          <div class="lg:block hidden"></div>
+          <!-- mission count -->
+          <div
+            v-if="dataMissionStatsBlock"
+            class="lg:col-span-2 sm:col-span-5 col-span-full"
+          >
+            <template v-if="dataMissionStatsBlock.link">
+              <BaseLink
+                variant="none"
+                :target="dataMissionStatsBlock.linkTarget ? '_blank' : '_self'"
+                :href="dataMissionStatsBlock.link"
+                link-class="block"
+              >
+                <p
+                  v-if="dataMissionStatsBlock.heading"
+                  class="text-subtitle text-jpl-red mb-4"
+                >
+                  {{ dataMissionStatsBlock.heading }}
+                </p>
+              </BaseLink>
+            </template>
+            <template v-else>
+              <p
+                v-if="dataMissionStatsBlock.heading"
+                class="text-subtitle text-jpl-red mb-4"
+              >
+                {{ dataMissionStatsBlock.heading }}
+              </p>
+            </template>
+            <p
+              v-if="dataMissionStatsBlock.title"
+              class="text-body-sm mb-4"
+            >
+              {{ dataMissionStatsBlock.title }}
+            </p>
+            <p
+              v-if="missionCount"
+              class="text-stats-xl"
+            >
+              {{ missionCount }}
+            </p>
+          </div>
+          <!-- generic stats -->
+          <div
+            v-if="dataGenericStatsBlock"
+            class="lg:col-span-3 sm:col-span-6 col-span-full"
+          >
+            <template v-if="dataGenericStatsBlock.link">
+              <BaseLink
+                variant="none"
+                :target="dataGenericStatsBlock.linkTarget ? '_blank' : '_self'"
+                :href="dataGenericStatsBlock.link"
+                link-class="block"
+              >
+                <p
+                  v-if="dataGenericStatsBlock.heading"
+                  class="text-subtitle text-jpl-red mb-4"
+                >
+                  {{ dataGenericStatsBlock.heading }}
+                </p>
+              </BaseLink>
+            </template>
+            <template v-else>
+              <p
+                v-if="dataGenericStatsBlock.heading"
+                class="text-subtitle text-jpl-red mb-4"
+              >
+                {{ dataGenericStatsBlock.heading }}
+              </p>
+            </template>
+            <p
+              v-if="dataGenericStatsBlock.title"
+              class="text-body-sm mb-4"
+            >
+              {{ dataGenericStatsBlock.title }}
+            </p>
+            <div
+              v-if="
+                dataGenericStatsBlock.dateDisplay === 'countdown' ||
+                dataGenericStatsBlock.dateDisplay === 'time_elapsed'
+              "
+            >
+              <BaseTimer
+                :target-date-time="dataGenericStatsBlock.date"
+                :countdown="dataGenericStatsBlock.dateDisplay === 'countdown'"
+              />
+            </div>
+            <p
+              v-else-if="dataGenericStatsBlock.dateDisplay === 'static'"
+              class="text-stats-lg"
+            >
+              {{
+                // @ts-ignore
+                $filters.displayDate(dataGenericStatsBlock.date)
+              }}
+            </p>
+            <template v-else-if="dataGenericStatsBlock.dateDisplay === 'live'">
+              <component
+                :is="hasFeaturedEmbed ? 'a' : 'div'"
+                v-scroll-to="hasFeaturedEmbed ? '#featuredEmbed' : null"
+                :href="hasFeaturedEmbed ? '#featuredEmbed' : null"
+                class="group block"
+                :class="{ 'cursor-pointer': hasFeaturedEmbed }"
+                @click="playVideo"
+              >
+                <p class="text-stats-lg flex items-center">
+                  <span class="relative flex w-3 h-3 mr-3">
+                    <span
+                      class="motion-safe:animate-ping bg-green absolute inline-flex w-full h-full rounded-full opacity-75"
+                    ></span>
+                    <span class="bg-green relative inline-flex w-3 h-3 rounded-full"></span>
+                  </span>
+                  <span>Watch Live</span>
+                </p>
+                <p class="text-gray-mid-dark flex flex-wrap mt-2 text-sm">
+                  <span class="mr-1 -mb-3">Estimated:</span>
+                  <span class="sm:whitespace-nowrap">
+                    {{
+                      // @ts-ignore
+                      $filters.displayDate(dataGenericStatsBlock.date, 'DateTime')
+                    }}
+                    UTC
+                  </span>
+                </p>
+
+                <div
+                  v-if="hasFeaturedEmbed"
+                  class="lg:-mb-8 can-hover:group-hover:ml-3 text-jpl-red-light text-7xl ml-0 transition-all duration-200 ease-in"
+                >
+                  <IconArrow />
+                </div>
+              </component>
+            </template>
+          </div>
+          <!-- DSN Widget -->
+          <DsnWidget />
+          <!-- asteroid watch -->
+          <div
+            v-if="asteroidWatch"
+            class="lg:col-span-3 sm:col-span-6 col-span-full"
+          >
+            <template v-if="asteroidWatch.link">
+              <BaseLink
+                variant="none"
+                :target="asteroidWatch.linkTarget ? '_blank' : '_self'"
+                :href="asteroidWatch.link"
+                link-class="block"
+              >
+                <p
+                  v-if="asteroidWatch.heading"
+                  class="text-subtitle text-jpl-red mb-4"
+                >
+                  {{ asteroidWatch.heading }}
+                </p>
+              </BaseLink>
+            </template>
+            <template v-else>
+              <p
+                v-if="asteroidWatch.heading"
+                class="text-subtitle text-jpl-red mb-4"
+              >
+                {{ asteroidWatch.heading }}
+              </p>
+            </template>
+            <p
+              v-if="asteroidWatch.title"
+              class="text-body-sm mb-4"
+            >
+              {{ asteroidWatch.title }}
+            </p>
+            <template v-if="asteroidWatch.asteroidApproach">
+              <p
+                v-if="asteroidWatch.asteroidApproach.date"
+                class="text-stats-lg"
+              >
+                {{
+                  // @ts-ignore
+                  $filters.displayDate(asteroidWatch.asteroidApproach.date)
+                }}
+              </p>
+              <BaseUnitToggle
+                v-slot="slotProps"
+                :unit-pair="'MI_KM'"
+                :value="parseFloat(asteroidWatch.asteroidApproach.distanceMiles)"
+                :second-value="parseFloat(asteroidWatch.asteroidApproach.distanceKilometers)"
+                :value-system="'imperial'"
+                inline
+                class="text-gray-mid-dark mt-2"
+              >
+                <span class="text-sm"> Proximity {{ slotProps.formattedValue }} </span>
+              </BaseUnitToggle>
+              <BaseLink
+                link-class="block"
+                variant="none"
+                aria-label="View the next five approaches"
+                to="/asteroid-watch/next-five-approaches"
+              >
+                <div
+                  class="lg:-mb-8 can-hover:group-hover:ml-3 text-jpl-red-light text-7xl ml-0 transition-all duration-200 ease-in"
+                >
+                  <IconArrow />
+                </div>
+              </BaseLink>
+            </template>
+          </div>
+        </div>
+      </div>
+      <div class="bg-gray-light col-start-container-end col-end-bleed sm:block hidden"></div>
+    </div>
+  </section>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseUnitToggle from './../BaseUnitToggle/BaseUnitToggle.vue'
+import BaseTimer from './../BaseTimer/BaseTimer.vue'
+import IconArrow from './../Icons/IconArrow.vue'
+import IconArrows from './../Icons/IconArrows.vue'
+import DsnWidget from './../DsnWidget/DsnWidget.vue'
+type blockObject = {
+  blockType: string
+}
+
+type HomePageEmbedBlockItem = {
+  display: boolean
+}
+type HomePageEmbedBlock = HomePageEmbedBlockItem[]
+
+/**
+ * Displays homepage stats
+ */
+export default defineComponent({
+  name: 'HomepageStats',
+  components: {
+    BaseLink,
+    IconArrow,
+    IconArrows,
+    BaseUnitToggle,
+    BaseTimer,
+    DsnWidget
+  },
+  props: {
+    statistics: {
+      type: Array,
+      required: false
+    },
+    missionCount: {
+      type: Number,
+      required: false
+    },
+    dsn: {
+      type: Object,
+      required: false
+    },
+    asteroidWatch: {
+      type: Object,
+      required: false
+    },
+    // pass the featured video data to determine watch-live render behavior
+    featuredEmbed: {
+      type: Array as PropType<HomePageEmbedBlock>,
+      required: false
+    }
+  },
+  data(): {
+    autoplayAdded: boolean
+  } {
+    return {
+      autoplayAdded: false
+    }
+  },
+  computed: {
+    dataMissionStatsBlock(): blockObject | null {
+      const data = this.filterBlocksByType('StatisticsMissionBlock')
+      if (data && data.length) {
+        return data[0]
+      }
+      return null
+    },
+    dataGenericStatsBlock(): blockObject | null {
+      const data = this.filterBlocksByType('StatisticsGenericBlock')
+      if (data && data.length) {
+        return data[0]
+      }
+      return null
+    },
+    hasFeaturedEmbed(): boolean {
+      if (this.featuredEmbed && this.featuredEmbed.length && this.featuredEmbed[0].display) {
+        return true
+      }
+      return false
+    }
+  },
+  methods: {
+    playVideo() {
+      if (this.hasFeaturedEmbed) {
+        const featuredEmbedDiv = document.getElementById('featuredEmbed')
+        if (featuredEmbedDiv) {
+          const featuredEmbedIframe = featuredEmbedDiv.querySelector('iframe') as HTMLIFrameElement
+          if (featuredEmbedIframe && this.autoplayAdded === false) {
+            featuredEmbedIframe.src += '&autoplay=1'
+            this.autoplayAdded = true
+          }
+        }
+      }
+      return null
+    },
+    filterBlocksByType(blockType: string): blockObject[] | null {
+      if (this.statistics) {
+        const theBlocks = this.statistics as blockObject[]
+        return theBlocks.filter((block: blockObject) => block.blockType === blockType)
+      }
+      return null
+    }
+  }
+})
+</script>
+<style lang="scss">
+.HomepageStats {
+  .BaseTimer {
+    .text-stats-xl {
+      @apply leading-none;
+
+      @screen lg {
+        font-size: 2.125rem; // 34px
+      }
+      @screen xl {
+        font-size: 2.25rem; // 36px
+      }
+    }
+
+    .unit {
+      @apply text-gray-mid-dark;
+    }
+  }
+
+  .BaseUnitToggle {
+    @apply flex items-center;
+
+    fieldset {
+      @apply pl-3;
+    }
+
+    .unit {
+      @apply -mt-3;
+    }
+  }
+}
+</style>

package/src/components/HomepageTeaserBlock/HomepageTeaserBlock.stories.js

@@ -0,0 +1,90 @@
+import HomepageTeaserBlock from './HomepageTeaserBlock.vue'
+
+export default {
+  title: 'WWW/Homepage/HomepageTeaserBlock',
+  component: HomepageTeaserBlock,
+  excludeStories: /.*(Data|Decorator)$/,
+  parameters: {
+    viewMode: 'canvas'
+  }
+}
+
+// template
+const HomepageTeaserBlockTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { HomepageTeaserBlock },
+  template: `<HomepageTeaserBlock :data="block" />`
+})
+
+// data
+export const HomepageTeaserBlockData = {
+  block: {
+    blockType: 'HomePageTeaserBlock',
+    coverImage: {
+      alt: 'JPL Campus',
+      src: {
+        width: 1024,
+        height: 306,
+        url: 'https://picsum.photos/1024/306'
+      },
+      screenXs: {
+        url: 'https://picsum.photos/320/180', // 16:9
+        width: 320
+      },
+      screenMd: {
+        url: 'https://picsum.photos/768/432', // narrower
+        width: 768
+      },
+      screenTwoxl: {
+        url: 'https://picsum.photos/1440/430', // narrower
+        width: 1440
+      }
+    },
+    heading: 'Jet Propulsion Laboratory',
+    paragraph: `<p>Have you been awed by views of desolate Martian Valleys, swirling storms above Jupiter, and the icy blades ringing Saturn? Then you have journeyed with NASA JPL spacecraft and rovers.</p>
+      <p>Our missions have flown to every planet and the Sun in a quest to understand our place in the universe, and to search for the possibility of life beyond Earth. </p>`,
+    link: {
+      text: 'More about JPL',
+      document: null,
+      page: {
+        url: '/about/'
+      },
+      externalLink: null
+    },
+    card: [
+      {
+        heading: 'Virtual Tour',
+        description:
+          'Lorem ipsum dolor sit amet elec, consectetur adipiscing elit nunc aliquam quis eros.',
+        image: {
+          src: {
+            height: 400,
+            url: 'https://picsum.photos/800/400',
+            width: 800
+          },
+          srcSet: 'https://picsum.photos/400/200 320w, https://picsum.photos/800/400 1024w'
+        },
+        link: {
+          text: 'Take the tour',
+          document: null,
+          page: null,
+          externalLink: 'https://www.jpl.nasa.gov'
+        }
+      }
+    ]
+  }
+}
+
+// stories
+export const TeaserBlock = HomepageTeaserBlockTemplate.bind({})
+TeaserBlock.args = {
+  ...HomepageTeaserBlockData
+}
+
+export const NoImage = HomepageTeaserBlockTemplate.bind({})
+NoImage.args = {
+  block: {
+    ...HomepageTeaserBlockData.block,
+    coverImage: null
+  }
+}

package/src/components/HomepageTeaserBlock/HomepageTeaserBlock.vue

@@ -0,0 +1,156 @@
+<template>
+  <div
+    v-if="data"
+    class="HomepageTeaserBlock max-w-screen-3xl relative mx-auto"
+  >
+    <BaseImage
+      v-if="hasCoverImage"
+      class="lg:mb-0 mb-10"
+      :src="data.coverImage.src.url"
+      :srcset="
+        mixinGetSrcSet(data.coverImage) ? mixinGetSrcSet(data.coverImage) : data.coverImage.srcSet
+      "
+      :alt="data.coverImage.alt"
+      :width="data.coverImage.src.width"
+      :height="data.coverImage.src.height"
+      image-class="object-cover w-full h-full"
+      loading="lazy"
+    />
+
+    <div class="lg:px-4 2xl:px-0">
+      <div
+        class="lg:BaseGrid container relative z-10 mx-auto bg-white"
+        :class="{ 'lg:-mt-26 lg:pt-22': hasCoverImage }"
+      >
+        <div class="lg:px-0 lg:col-end-8 xl:col-end-9 col-start-2 px-4">
+          <BaseHeading
+            v-if="data.heading"
+            level="h2"
+            class="lg:mb-8 mb-5"
+          >
+            {{ data.heading }}
+          </BaseHeading>
+          <BlockText
+            v-if="data.paragraph"
+            class="lg:pr-14"
+            :text="data.paragraph"
+          />
+          <template v-if="data.link">
+            <BaseLink
+              variant="primary"
+              class="mt-5"
+              link-class="inline-block"
+              caret-wrapper-class="py-2"
+              :href="mixinGetExternalLink(data.link) ? mixinGetExternalLink(data.link) : null"
+              :to="data.link.page ? data.link.page.url : null"
+              external-target-blank
+            >
+              {{ data.link.text }}
+            </BaseLink>
+          </template>
+        </div>
+        <aside
+          v-if="theCard"
+          :aria-label="theCard ? theCard.heading : 'Virtual Tour'"
+          class="lg:mt-0 lg:mx-0 xl:col-span-3 sm:mx-auto lg:w-auto sm:w-80 lg:col-start-8 xl:col-start-9 col-span-4 mx-6 mt-12"
+        >
+          <div
+            class="shadow-jpl"
+            :class="{ 'flex items-center min-h-32': !theCard.image }"
+          >
+            <div
+              v-if="theCard.image"
+              class="relative h-auto"
+            >
+              <template v-if="theCard.link">
+                <BaseLink
+                  variant="none"
+                  link-class="block"
+                  :aria-label="theCard.link.text || 'Learn more'"
+                  :href="
+                    mixinGetExternalLink(theCard.link) ? mixinGetExternalLink(theCard.link) : null
+                  "
+                  :to="theCard.link.page ? theCard.link.page.url : null"
+                  external-target-blank
+                >
+                  <HomepageTeaserBlockCardImage :data="theCard" />
+                </BaseLink>
+              </template>
+              <template v-else>
+                <HomepageTeaserBlockCardImage :data="theCard" />
+              </template>
+            </div>
+            <div class="px-6 pt-6 pb-4">
+              <div class="mb-2 text-3xl font-medium">
+                {{ theCard.heading }}
+              </div>
+              <p
+                v-if="theCard.description"
+                class="text-body-sm"
+              >
+                {{ theCard.description }}
+              </p>
+
+              <template v-if="theCard.link">
+                <BaseLink
+                  variant="primary"
+                  class="mt-3"
+                  link-class="inline-block"
+                  caret-wrapper-class="py-2"
+                  :href="
+                    mixinGetExternalLink(theCard.link) ? mixinGetExternalLink(theCard.link) : null
+                  "
+                  :to="theCard.link.page ? theCard.link.page.url : null"
+                  external-target-blank
+                >
+                  {{ theCard.link.text }}
+                </BaseLink>
+              </template>
+            </div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent } from 'vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+import BlockText from './../BlockText/BlockText.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import HomepageTeaserBlockCardImage from './../HomepageTeaserBlock/HomepageTeaserBlockCardImage.vue'
+
+export default defineComponent({
+  name: 'HomepageTeaserBlock',
+  components: {
+    BaseHeading,
+    BlockText,
+    BaseImage,
+    BaseLink,
+    HomepageTeaserBlockCardImage
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    theCard(): object | null {
+      if (this.data.card && this.data.card.length > 0) {
+        return this.data.card[0]
+      }
+      return null
+    },
+    hasCoverImage(): boolean {
+      if (this.data.coverImage && this.data.coverImage.src) {
+        return true
+      }
+      return false
+    }
+  }
+})
+</script>

package/src/components/HomepageTeaserBlock/HomepageTeaserBlockCardImage.vue

@@ -0,0 +1,58 @@
+<template>
+  <div
+    v-if="data && data.image"
+    class="relative h-auto"
+  >
+    <div class="bg-jpl-red absolute bottom-0 right-0 z-10 text-white">
+      <Icon360 />
+    </div>
+
+    <BaseImagePlaceholder
+      aspect-ratio="16:9"
+      dark-mode
+    >
+      <BaseImage
+        v-if="data.image.src"
+        :src="data.image.src.url"
+        :srcset="theSrcSet"
+        alt=""
+        :width="data.image.src.width"
+        :height="data.image.src.height"
+        object-fit-class="cover"
+        loading="lazy"
+      />
+    </BaseImagePlaceholder>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mixinGetSrcSet } from '../../utils/mixins'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import Icon360 from './../Icons/Icon360.vue'
+
+export default defineComponent({
+  name: 'HomepageTeaserBlockCardImage',
+  components: {
+    BaseImagePlaceholder,
+    BaseImage,
+    Icon360
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    theSrcSet() {
+      return this.data?.image
+        ? mixinGetSrcSet(this.data.image)
+          ? mixinGetSrcSet(this.data.image)
+          : this.data.image.srcSet
+        : undefined
+    }
+  }
+})
+</script>

package/src/components/Icons/Icon360.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    class="Icon360"
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <g fill="none">
+      <path
+        d="M13.736 16.144c.696 0 1.26-.212 1.692-.636.432-.424.648-.996.648-1.716 0-.52-.11-.952-.33-1.296a1.744 1.744 0 00-.882-.72v-.048c.336-.192.598-.434.786-.726.188-.292.282-.666.282-1.122 0-.72-.202-1.276-.606-1.668-.404-.392-.946-.588-1.626-.588-.432 0-.816.094-1.152.282a1.996 1.996 0 00-.786.792c-.188.34-.282.734-.282 1.182v.3h1.332v-.192c0-.416.08-.732.24-.948a.776.776 0 01.66-.324.78.78 0 01.648.306c.16.204.24.51.24.918 0 .424-.09.752-.27.984-.18.232-.406.348-.678.348h-.516v1.092h.492c.744 0 1.116.452 1.116 1.356 0 .44-.094.772-.282.996-.188.224-.442.336-.762.336-.336 0-.592-.116-.768-.348-.176-.232-.264-.564-.264-.996v-.216h-1.332v.18c0 .76.21 1.362.63 1.806.42.444 1.01.666 1.77.666zm6.33 0c.424 0 .806-.108 1.146-.324.34-.216.606-.526.798-.93.192-.404.288-.874.288-1.41 0-.792-.172-1.432-.516-1.92-.344-.488-.844-.732-1.5-.732-.272 0-.524.062-.756.186a1.641 1.641 0 00-.576.51c.008-.968.076-1.678.204-2.13.128-.452.384-.678.768-.678.56 0 .84.528.84 1.584h1.32c0-.808-.174-1.456-.522-1.944-.348-.488-.878-.732-1.59-.732-.512 0-.94.14-1.284.42-.344.28-.608.752-.792 1.416-.184.664-.276 1.552-.276 2.664 0 1.456.206 2.49.618 3.102.412.612 1.022.918 1.83.918zm-.06-1.092c-.32 0-.562-.146-.726-.438-.164-.292-.246-.67-.246-1.134 0-.48.082-.864.246-1.152.164-.288.406-.432.726-.432.32 0 .56.144.72.432.16.288.24.672.24 1.152 0 .464-.082.842-.246 1.134-.164.292-.402.438-.714.438zm6.174 1.092c.512 0 .938-.128 1.278-.384.34-.256.602-.696.786-1.32.184-.624.276-1.476.276-2.556s-.092-1.932-.276-2.556c-.184-.624-.446-1.064-.786-1.32s-.766-.384-1.278-.384c-.52 0-.95.128-1.29.384-.34.256-.6.694-.78 1.314-.18.62-.27 1.474-.27 2.562 0 1.088.09 1.942.27 2.562.18.62.44 1.058.78 1.314s.77.384 1.29.384zm0-1.092c-.384 0-.648-.22-.792-.66-.144-.44-.216-1.136-.216-2.088v-.84c0-.952.072-1.648.216-2.088.144-.44.408-.66.792-.66.384 0 .648.22.792.66.144.44.216 1.136.216 2.088v.84c0 .952-.072 1.648-.216 2.088-.144.44-.408.66-.792.66zm5.862-4.08a1.681 1.681 0 001.458-.828c.148-.256.222-.536.222-.84 0-.304-.074-.586-.222-.846a1.606 1.606 0 00-.612-.612 1.681 1.681 0 00-.846-.222c-.304 0-.586.074-.846.222-.26.148-.464.352-.612.612-.148.26-.222.542-.222.846a1.649 1.649 0 00.834 1.446c.26.148.542.222.846.222zm0-.756a.89.89 0 01-.654-.27.877.877 0 01-.27-.642c0-.256.09-.472.27-.648a.901.901 0 01.654-.264c.256 0 .472.088.648.264a.881.881 0 01.264.648.887.887 0 01-.264.642.871.871 0 01-.648.27zM33.345 23.893c-.011-.016-.026-.03-.037-.046-1.204-1.498-3.23-2.261-5.001-2.782-2.138-.631-4.366-.939-6.587-1.034a31.217 31.217 0 00-6.685.41c-2.033.357-4.138.92-5.905 2.034-.78.49-1.552 1.14-1.931 2.015a2.499 2.499 0 00-.184 1.258c.071.52.098 1.068.266 1.57.54 1.615 2.296 3 3.751 3.634 1.832.801 3.804 1.284 5.807 1.532V36l7.402-6.048-7.402-6.04v4.283l-.03-.003c-1.039-.183-2.067-.441-3.042-.837-.848-.342-1.725-.794-2.322-1.508-.162-.198-.37-.43-.285-.689.033-.11.082-.22.14-.323.213-.399.535-.726.892-1 1.44-1.124 3.41-1.577 5.166-1.832a21.212 21.212 0 016.257.034c1.331.206 2.667.533 3.893 1.11.732.346 1.433.79 1.951 1.426.195.258.525.704.345 1.023-.22.391-.559.707-.915.97a7.697 7.697 0 01-1.91.992v4.488c1.663-.383 3.13-1.035 4.456-2.061C34 28 33.923 26.303 33.976 25.953c.104-.715-.143-1.402-.56-1.969-.026-.03-.048-.06-.071-.091z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'Icon360'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/Icon360';
+</style>