init commit

1 files changed, 56 insertions, 0 deletions

diff --git a/src/components/EditorsChoiceBadge.svelte b/src/components/EditorsChoiceBadge.svelte
new file mode 100644
index 0000000..2c4efe1
--- /dev/null
+++ b/src/components/EditorsChoiceBadge.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import LaurelIcon from '~/sf-symbols/laurel.left.svg';
+    import { getI18n } from '~/stores/i18n';
+
+    const i18n = getI18n();
+</script>
+
+<h4>
+    <span class="icon-container left" aria-hidden="true">
+        <LaurelIcon />
+    </span>
+    {$i18n.t('ASE.Web.AppStore.Review.EditorsChoice')}
+    <span class="icon-container right" aria-hidden="true">
+        <LaurelIcon />
+    </span>
+</h4>
+
+<style lang="scss">
+    @use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
+    @use 'ac-sasskit/core/locale' as *;
+
+    h4 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        margin-bottom: 10px;
+        gap: 10px;
+        font: var(--font, var(--title-1-emphasized));
+        color: var(--systemSecondary);
+    }
+
+    .icon-container.right {
+        transform: rotateY(180deg);
+
+        @include rtl {
+            transform: rotateY(0);
+        }
+    }
+
+    .icon-container.left {
+        @include rtl {
+            transform: rotateY(180deg);
+        }
+    }
+
+    .icon-container :global(svg) {
+        overflow: visible;
+        height: 42px;
+        transform: translateY(3px);
+    }
+
+    .icon-container :global(svg path) {
+        fill: var(--systemSecondary);
+    }
+</style>