feat: initial commit

apps/user-app/src/components/ui/DropDown.vue

@@ -0,0 +1,41 @@
+<!-- Ported from legacy henza_pwa/src/components/dropDown.vue -->
+<template>
+  <div :class="`rounded-[5px] border border-solid text-primary px-[15px] py-[15px] ${show ? 'border-secondary' : 'border-lightGray/20'}`">
+    <div class="flex w-full justify-between cursor-pointer" @click="show = !show">
+      <h5 class="flex-1 m-0">
+        <slot name="text">{{ text }}</slot>
+      </h5>
+      <Icon icon="vuesax-linear:arrow-down" :class="`transition-all duration-200 ease-linear ${show ? 'rotate-180' : undefined}`" size="25" />
+    </div>
+    <transition name="drop" mode="out-in" appear>
+      <div class="w-full" style="overflow: hidden" v-if="show">
+        <slot />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Icon from '../icon/Icon.vue'
+
+withDefaults(defineProps<{ text?: string }>(), {})
+const show = ref(false)
+</script>
+
+<style lang="less">
+.drop-enter-active {
+  animation: drop 0.2s cubic-bezier(0.33, 1, 0.68, 1);
+}
+.drop-leave-to {
+  animation: drop 0.2s cubic-bezier(0.33, 1, 0.68, 1) reverse;
+}
+@keyframes drop {
+  0% {
+    max-height: 0;
+  }
+  100% {
+    max-height: 120px;
+  }
+}
+</style>