basic dynamic stepper

packages/bridge-ui-v2/src/components/Card/Card.svelte

@@ -18,7 +18,9 @@
 
 <div class={classes}>
   <div class="card-body body-regular p-4 md:p-[50px] gap-0">
-    <h2 class="card-title title-screen-bold">{title}</h2>
+    {#if title}
+      <h2 class="card-title title-screen-bold">{title}</h2>
+    {/if}
     {#if text}
       <p>{text}</p>
     {/if}

packages/bridge-ui-v2/src/components/Stepper/Step.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let isActive = false;
+  export let stepIndex: number;
+  export let currentStepIndex: number;
+</script>
+
+<li
+  data-content=""
+  class="step
+  {isActive ? 'step-primary' : ''} 
+  {stepIndex < currentStepIndex && !isActive ? 'step-previous' : ''}">
+  <slot />
+</li>

packages/bridge-ui-v2/src/components/Stepper/Stepper.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { classNames } from '$libs/util/classNames';
+  export let activeStep: number = 0;
+
+  const styles = `
+    w-full 
+    md:card 
+    md:rounded-[20px] 
+    md:border 
+    md:border-divider-border
+    dark:md:glassy-gradient-card
+    dark:md:glass-background-gradient`;
+
+  $: classes = classNames(styles, $$props.class);
+</script>
+
+<div class={classes}>
+  <div class="card-body body-regular gap-0 p-0">
+    <ul class="steps my-[30px]">
+      <slot {activeStep} />
+    </ul>
+  </div>
+</div>

packages/bridge-ui-v2/src/components/Stepper/index.ts

@@ -0,0 +1,2 @@
+export { default as Step } from './Step.svelte';
+export { default as Stepper } from './Stepper.svelte';

packages/bridge-ui-v2/src/i18n/en.json

@@ -12,9 +12,20 @@
   "bridge": {
     "title": {
       "default": "Bridge Token",
-      "nft": "Bridge NFT"
+      "nft": {
+        "import": "Import NFT",
+        "review": "Review",
+        "confirm": "Confirm"
+      }
+    },
+    "description": {
+      "default": "Send your assets across chains.",
+      "nft": {
+        "import": "Transfer your NFTs across chains",
+        "review": "Verify your NFT details.",
+        "confirm": "Confirm your NFT details."
+      }
     },
-    "description": "Send your assets across chains.",
     "actions": {
       "approve": {
         "tx": "Transaction sent to approve {token} tokens. Click <a href=\"{url}\" target=\"_blank\"><b>here</b></a> to see it in the explorer.",
@@ -48,7 +59,8 @@
       "approved": "Approved",
       "bridge": "Bridge",
       "bridging": "Bridging",
-      "import": "Fetch NFT data"
+      "fetch": "Fetch NFT data",
+      "import": "Import"
     }
   },
   "recipient": {

packages/bridge-ui-v2/src/styles/override.css

@@ -47,3 +47,34 @@ input[type='number'] {
   flex-direction: column;
   align-items: center;
 }
+
+.step:after {
+  height: 0px !important;
+  width: 0px !important;
+}
+
+.step-primary:after {
+  height: 8px !important;
+  width: 8px !important;
+}
+
+.step:before {
+  background-color: rgba(255, 198, 233, 0.2) !important;
+  height: 2px !important;
+}
+
+.step-primary:before {
+  background-color: #e81899 !important;
+  height: 2px !important;
+}
+
+.step-previous:before {
+  background-color: #e81899 !important;
+  height: 2px !important;
+}
+
+.step-previous:after {
+  @apply step-primary;
+  height: 0px !important;
+  width: 0px !important;
+}