feat(notifications): add entity dialog

See: BEDS-565

frontend/components/bc/BcAccordion.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts" generic="T">
+import { faCopy } from '@fortawesome/pro-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+const props = defineProps<{
+  infoCopy?: string,
+  items?: T[],
+  open?: boolean,
+}>()
+const isOpen = ref(props.open ?? false)
+const {
+  copy,
+  isSupported,
+} = useClipboard()
+const idList = useId()
+
+const textToCopy = ref<string>('')
+onMounted(() => {
+  const ulElement = document.getElementById(idList)
+  const liElements = ulElement?.querySelectorAll('li')
+  if (liElements) {
+    const liTexts = [ ...liElements ].map(liElement => liElement.textContent?.trim())
+    textToCopy.value = liTexts.join(', ')
+  }
+})
+const toast = useBcToast()
+const copyText = async () => {
+  await copy(textToCopy.value).then(() => {
+    toast.showInfo({
+      detail: 'Copied to clipboard',
+      summary: props.infoCopy ?? '',
+    })
+  })
+}
+</script>
+
+<template>
+  <details
+    class="bc-accordion"
+    :open
+  >
+    <summary
+      @click="isOpen = !isOpen"
+    >
+      <span class="bc-accordion__heading">
+        <IconChevron
+          :direction="isOpen ? 'bottom' : 'right'"
+        />
+        <slot name="headingIcon" />
+        <slot name="heading" />
+      </span>
+    </summary>
+    <BcCard class="bc-accordion__content">
+      <ul
+        :id="idList"
+        class="bc-accordion-list"
+      >
+        <li
+          v-for="item in items"
+          :key="`${item}`"
+          class="bc-accordion-list__item"
+        >
+          <slot name="item" :item />
+        </li>
+      </ul>
+      <template #floating-action-button>
+        <BcButtonIcon
+          v-if="isSupported"
+          screenreader-text="Copy list to clipboard"
+          class="bc-accordion__button"
+          @click="copyText"
+        >
+          <FontAwesomeIcon
+            :icon="faCopy"
+            class="bc-accordion__button-icon"
+          />
+        </BcButtonIcon>
+      </template>
+    </BcCard>
+  </details>
+</template>
+
+<style scoped lang="scss">
+@use '~/assets/css/breakpoints' as *;
+
+.bc-accordion {
+  position: relative;
+  summary {
+    list-style: none;
+  }
+  summary::-webkit-details-marker{
+    display: none;
+  }
+}
+.bc-accordion__heading {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+.bc-accordion__content {
+  // display: grid;
+  margin-top: 0.625rem;
+  min-height: 2.563rem;
+  max-height: 9.375rem;
+  overflow: auto;
+  width: 100%;
+  @media (min-width: $breakpoint-md) {
+    width: 41.75rem;
+  }
+
+}
+.bc-accordion-list {
+  list-style: none;
+  padding-inline-start: 0;
+  display: inline;
+}
+.bc-accordion-list__item {
+  display: inline;
+}
+.bc-accordion-list__item:not(:last-child)::after {
+content: ', ';
+}
+.bc-accordion__button {
+  --border-width: .0625rem;
+  background-color: var(--input-background);
+  border-radius: var(--corner-radius, 4px);
+  padding: calc(0.3125rem - var(--border-width));
+  border: var(--border-width) solid var(--input-border-color);
+  color: inherit;
+  height: 1.875rem;
+  width: 1.875rem;
+  position: absolute;
+  bottom: 6px;
+  right: 11px;
+}
+.bc-accordion__button-icon {
+  width: .9375rem;
+  font-size: .9375rem;
+  line-height: 100%;
+}
+</style>

frontend/components/bc/BcCard.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="bc-card">
+    <slot />
+    <slot name="floating-action-button" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.bc-card {
+  background-color: var(--input-background);
+  border-radius: var(--corner-radius, 4px);
+  padding: 0.625rem;
+  border: 1px solid var(--input-border-color);
+}
+</style>

frontend/components/bc/BcText.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 withDefaults(
   defineProps<{
+    isDimmed?: boolean,
     tag?: 'h2' | 'p' | 'span',
-    variant?: 'base' | 'lg',
+    variant?: 'base' | 'lg' | 'md' | 'sm',
   }>(), {
     tag: 'span',
     variant: 'base',
@@ -15,6 +16,9 @@ withDefaults(
     :is="tag"
     :class="{
       'variant-lg': variant === 'lg',
+      'variant-md': variant === 'md',
+      'variant-sm': variant === 'sm',
+      'is-dimmed': isDimmed,
     }"
   >
     <slot />
@@ -23,6 +27,19 @@ withDefaults(
 
 <style scoped lang="scss">
 @use '~/assets/css/breakpoints' as *;
+.is-dimmed {
+  opacity: 0.7;
+}
+
+.variant-sm {
+  font-size: 0.875rem;
+}
+.variant-md {
+  font-family: "Montserrat";
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
 .variant-lg {
   font-family: "Montserrat";
   font-size: 1.25rem;

frontend/components/bc/header/HeaderLogo.vue

@@ -5,13 +5,13 @@ defineProps<{
 </script>
 
 <template>
-  <BcLink
+  <NuxtLink
     to="/"
     :class="`${layoutAdaptability}-adaptability`"
   >
     <IconBeaconchainLogo alt="Beaconcha.in logo" />
     <span class="name">beaconcha.in</span>
-  </BcLink>
+  </NuxtLink>
 </template>
 
 <style lang="scss" scoped>