feat: add search token card

Co-authored-by: RcleydsonR <rafael.cleydson@gmail.com>

src/assets/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 1.5C4 0.947715 4.44772 0.5 5 0.5C5.55229 0.5 6 0.947715 6 1.5V12.0858L8.29289 9.79289C8.68342 9.40237 9.31658 9.40237 9.70711 9.79289C10.0976 10.1834 10.0976 10.8166 9.70711 11.2071L5.70711 15.2071C5.31658 15.5976 4.68342 15.5976 4.29289 15.2071L0.292893 11.2071C-0.0976311 10.8166 -0.0976311 10.1834 0.292893 9.79289C0.683417 9.40237 1.31658 9.40237 1.70711 9.79289L4 12.0858V1.5Z" fill="white"/>
+</svg>

src/assets/brz.svg

@@ -0,0 +1,18 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_257_714)">
+<path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#170636"/>
+<path d="M24.269 9.72809L20.1404 13.8568L24.269 17.9854L28.3977 13.8568L24.269 9.72809Z" fill="#14B23D"/>
+<path d="M7.76489 9.68823L3.63623 13.8169L7.76489 17.9456L11.8936 13.8169L7.76489 9.68823Z" fill="#FFC100"/>
+<path d="M16.0261 17.9628L11.8975 22.0915L16.0261 26.2202L20.1548 22.0915L16.0261 17.9628Z" fill="#14B23D"/>
+<path d="M7.76196 9.69141L16.0274 17.9568H24.2549L15.9895 9.69141H7.76196Z" fill="url(#paint0_linear_257_714)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_257_714" x1="9.81965" y1="7.64005" x2="13.4843" y2="22.2149" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFDC00"/>
+<stop offset="1" stop-color="#07E58A"/>
+</linearGradient>
+<clipPath id="clip0_257_714">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/CustomButton.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
 const props = defineProps({
   text: String,
-  isDisabled: Boolean
-})
+  isDisabled: Boolean,
+});
 
-const emit = defineEmits(['clicked'])
+const emit = defineEmits(["clicked"]);
 </script>
 
 <template>
-    <button type="button" class="button" @click="emit('clicked')" v-bind:class="{'opacity-70': isDisabled}" :disabled="isDisabled">
+  <button
+    type="button"
+    class="button"
+    @click="emit('clicked')"
+    v-bind:class="{ 'opacity-70': isDisabled }"
+    :disabled="isDisabled"
+  >
     {{ text }}
   </button>
 </template>

src/views/HomeView.vue

@@ -1,4 +1,9 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import CustomButton from "../components/CustomButton.vue";
+const searchClick = () => {
+  console.log("oferta selecionada");
+};
+</script>
 
 <template>
   <div class="page">
@@ -11,15 +16,60 @@
         crypto após realizar o Pix</span
       >
     </div>
-    <!-- <div
-      class="flex flex-col justify-center items-start px-8 py-6 gap-2 rounded-lg shadow-current backdrop-blur-md w-96 mt-10"
+    <div
+      class="flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-1/3 mt-10"
     >
+      <div
+        class="flex justify-between w-full bg-white px-10 py-5 rounded-lg border-y-10 relative"
+      >
+        <input
+          type="number"
+          class="border-none outline-none text-lg"
+          placeholder="Digite o valor que deseja pagar"
+        />
+        <p class="text-lg font-bold">R$</p>
+      </div>
+
+      <div
+        class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
+      >
+        <div
+          class="bg-emerald-400 px-4 py-3 rounded-lg absolute bottom-position"
+        >
+          <img alt="Ethereum image" src="@/assets/arrow.svg" />
+        </div>
+
+        <div class="flex justify-between w-full items-center">
+          <p class="text-3xl">0</p>
+          <div class="flex flex-row p-2 px-3 bg-gray-300 rounded-full">
+            <img alt="Ethereum image" class="mr-3" src="@/assets/brz.svg" />
+            <p class="text-gray-900 text-lg">BRZ</p>
+          </div>
+        </div>
+
+        <div class="custom-divide py-2"></div>
+        <p class="text-gray-500 text-lg pt-2">~ ETH 0,00 (+0,121%)</p>
+      </div>
+      <CustomButton
+        :text="'Selecionar Oferta'"
+        :is-disabled="true"
+        @clicked="searchClick()"
+      />
+    </div>
   </div>
-    Search component
-  --></div>
 </template>
 
 <style scoped>
+.custom-divide {
+  width: 100%;
+  border-bottom: 1px solid #d1d5db;
+}
+.bottom-position {
+  top: -20px;
+  right: 50%;
+  transform: translateX(50%);
+}
+
 .page {
   @apply flex flex-col items-center justify-center w-full mt-20;
 }