plugin-ui-for-kzt 0.0.16 → 0.0.18

package/example/App.vue

@@ -2,325 +2,158 @@
   <div class="demo-page">
     <h1>Plugin UI KZT - Компоненты</h1>
     <p>Ниже представлены все компоненты библиотеки с примерами их использования.</p>
-
-    <section>
-      <h2>BaseInputPhone.vue</h2>
-      <p>Компонент для отображения полей ввода телефонных номеров.</p>
-      <p>Пример использования:</p>
-      <base-input-phone
-          id="phone"
-          v-model="phoneModel"
-          size="large"
-          label="Phone Number"
-          placeholder="Enter phone number"
-          error="Invalid phone number"
-          hint="Please enter a valid phone number"
-          :tooltip-options="tooltipOptions"
-      />
-    </section>
-
-    <section>
-      <h2>BaseSegmentedButtons.vue</h2>
-      <p>Компонент для отображения сегментированных кнопок.</p>
-      <p>Пример использования:</p>
-      <base-segmented-buttons
-          id="segmented-buttons"
-          v-model="selectedOptionButton"
-          :options="[
-      { value: '1', label: 'Option 1' }, 
-      { value: '2', label: 'Option 2' }, 
-      { value: '3', label: 'Option 3' } 
-    ]"
-          size="large"
-      />
-    </section>
-
-    <section>
-      <h2>BaseInputCurrency.vue</h2>
-      <p>Компонент для отображения полей ввода валюты.</p>
-      <p>Пример использования:</p>
-      <base-input-currency
-          id="currency"
-          v-model="currencyModel"
-          size="large"
-          label="Currency Amount"
-          placeholder="0.00"
-          error="Invalid currency amount"
-          hint="Please enter a valid currency amount"
-          :tooltip-options="tooltipOptions"
-      />
-    </section>
-
-    <section>
-      <h2>BaseIcon.vue</h2>
-      <p>Компонент для отображения иконок.</p>
-      <p>Пример использования:</p>
-      <base-icon name="loader" size="small"/>
-      <base-icon name="email-sms" size="medium"/>
-      <base-icon name="calendar" size="small"/>
-    </section>
-
-    <section>
-      <h2>BaseSiteInput.vue</h2>
-      <base-site-input
-          v-model="siteModel"
-          size="small"
-          label="Site"
-          hint="Please enter site"
-          validation-text="validationText"
-      />
-    </section>
-
-    <section>
-      <h2>BaseBreadCrumbs.vue</h2>
-      <p>Компонент для отображения хлебных крошек.</p>
-      <p>Пример использования:</p>
-      <base-bread-crumbs :crumbs="[
-    { label: 'Home', to: '/' },
-    { label: 'Products', to: '/products' },
-    { label: 'Electronics', to: '/electronics' },
-    { label: 'Laptops', to: '/laptops' },
-    { label: 'Gaming Laptops', to: '/laptops/gaming' },
-  ]"/>
-    </section>
-
-    <section>
-      <h2>BaseLoader.vue</h2>
-      <p>Компонент для отображения индикатора загрузки.</p>
-      <p>Пример использования:</p>
-      <base-loader/>
-    </section>
-
-    <section>
-      <h2>BaseButton.vue</h2>
-      <p>Компонент для отображения кнопок.</p>
-      <p>Пример использования:</p>
-      <base-button>Click Me</base-button>
-    </section>
-
-    <section>
-      <h2>BaseCheckbox.vue</h2>
-      <p>Компонент для отображения чекбоксов.</p>
-      <p>Пример использования:</p>
-      <base-checkbox id="check" v-model="checkboxModel" label="Accept Terms"/>
-    </section>
-
-    <section>
-      <h2>BaseRadio.vue</h2>
-      <p>Компонент для отображения радиокнопок.</p>
-      <p>Пример использования:</p>
-      <base-radio id="radio1" v-model="radioModel" label="Option 1"/>
-    </section>
-
-    <section>
-      <h2>BaseTextarea.vue</h2>
-      <p>Компонент для отображения текстовых областей.</p>
-      <p>Пример использования:</p>
-      <base-textarea
-          id="textarea"
-          v-model="textAreaModel"
-          label="Enter text here"
-          size="large"
-      />
-    </section>
-
-    <section>
-      <h2>BaseToggle.vue</h2>
-      <p>Компонент для отображения переключателей.</p>
-      <p>Пример использования:</p>
-      <base-toggle id="toggle" v-model="toggleModel" label="Enable feature"/>
-    </section>
-
     <section>
-      <h2>BaseTooltip.vue</h2>
-      <p>Компонент для отображения подсказок.</p>
-      <p>Пример использования:</p>
-      <base-tooltip
-          title="This is a tooltip"
-          :content="contentTooltip"
-          position="right"
-          trigger="click"
-          theme="light"
+      <h2>BaseTag.vue</h2>
+      <div style="display: flex;
+    gap: 8px;
+    align-items: center;">
+        <base-tag size="extra-small" text="base tag" />
+        <base-tag size="small" color="secondary" text="base tag secondary" />
+        <base-tag 
+        text="base tag"
+        size="medium" 
+        closable
+        @close="console.log('Tag closed')"
+        />
+        <base-tag 
+        text="base tag" 
+        size="large"
+        addingTag
+        @addTag="console.log('New tag added:')"
+        />
+        <base-tag 
+        isHasAddTag
+        @updateInput="console.log(' tag added:', $event)"
+        />
+      </div>
+    </section>
+    <section>
+      <h2>BaseBadgeGroup.vue</h2>
+
+      <base-badge-group
+        size="medium"
+        color="primary"
+        badge-position="right"
       >
-        <template #trigger>
-          <base-button>Hover me</base-button>
+        <template #badge-text-container>
+          New feature
         </template>
-      </base-tooltip>
-    </section>
-
-    <section>
-      <h2>BaseInput.vue</h2>
-      <p>Компонент для отображения текстовых полей.</p>
-      <p>Пример использования:</p>
-      <base-input id="input" v-model="inputModel" label="Enter text here"/>
-    </section>
-
-    <section>
-      <h2>BaseInputEmail.vue</h2>
-      <p>Компонент для отображения полей ввода электронной почты.</p>
-      <p>Пример использования:</p>
-      <base-input-email
-          id="email"
-          v-model="emailModel"
-          label="Enter email here"
-          size="medium"
-          :tooltip-options="tooltipOptions"
-          validation-text="validationText Email"
+        <template #badge-text>
+          We’ve just released a new feature
+        </template>
+      </base-badge-group>
+      <base-badge-group
+        size="large"
+        color="gray"
+        arrowRightIcon
       >
-        <template>
-<!--          // #[right-icon]-->
-          <base-icon name="calendar" size="medium"/>
+        <template #badge-text-container>
+          New feature
         </template>
-      </base-input-email>
-    </section>
-
-    <section>
-      <h2>BaseInputCalendar.vue</h2>
-      <p>Компонент для отображения полей ввода даты.</p>
-      <p>Пример использования:</p>
-      <base-input-calendar
-          id="calendar"
-          v-model="calendarModel"
-          label="Select date here"
-          size="medium"
-          placeholder="Select date"
-          :min-date="new Date()"
-      />
+        <template #badge-text>
+          We’ve just released a new feature
+        </template>
+      </base-badge-group>
     </section>
-
     <section>
-      <h2>BaseOpenedListItem.vue</h2>
-      <p>Компонент для отображения открытых элементов списка.</p>
-      <p>Пример использования:</p>
-      <base-opened-list-item
-          id="list-item"
-          label="List Item"
-          active
+      <h2>BaseBadge.vue</h2>
+      <base-badge
+        size="extra-small"
+        color="primary"
+        class="badge-example"
+        closable
+      >
+        <template #text>Пример бейджа</template>
+      </base-badge>
+      <base-badge
+        size="small"
+        color="gray"
+        class="badge-example"
+        has-dot
+      >
+        <template #text>Пример бейджа</template>
+      </base-badge>
+      <base-badge
+        size="medium"
+        color="error"
+        class="badge-example"
+        arrow-up-icon
+      >
+        <template #text>Пример бейджа</template>
+      </base-badge>
+      <base-badge
+        size="large"
+        color="warning"
+        class="badge-example"
+        arrow-right-icon
       >
-        <template #icon>
-          <base-icon name="email-sms"/>
+        <template #text>Пример бейджа</template>
+      </base-badge>
+      <base-badge
+        size="large"
+        color="success"
+        class="badge-example"
+      >
+        <template #text>
+          <base-icon size="custom" name="help"></base-icon>
         </template>
-        <p>This is the content of the opened list item.</p>
-      </base-opened-list-item>
+      </base-badge>
     </section>
 
     <section>
-      <h2>BaseDropdown.vue</h2>
-      <p>Компонент для отображения выпадающих списков.</p>
-      <p>Пример использования:</p>
-      <base-dropdown
-          id="dropdown"
-          v-model="dropdownModel"
-          label="Select an option"
-          auto-close
-          :options="[
-      { label: 'Option 1', value: 'option1' },
-      { label: 'Option 2', value: 'option2' },
-      { label: 'Option 3', value: 'option3' },
-    ]"
+      <h2>BaseUpload.vue</h2>
+      <base-upload
+      :accepted-formats="accept"
       >
-        <template #top>
-          <base-button>Open Dropdown</base-button>
-        </template>
-        <template #dropdown>
-          <base-opened-list-item v-for="item in itemsDropdown" :key="item.text">
-            <template #icon>
-              <base-icon :name="item.name" size="medium"/>
-            </template>
-            {{ item.text }}
-          </base-opened-list-item>
-        </template>
-      </base-dropdown>
+      <template #title>my title</template>
+      </base-upload>
     </section>
 
     <section>
-      <h2>BaseSelect.vue</h2>
-      <p>Компонент для отображения выпадающих списков с выбором.</p>
-      <p>Пример использования:</p>
-      <base-select
-          id="select"
-          v-model="selectedOption"
-          :options="[
-        { id: 1, name: 'Option 1', value: 'option1', label: 'Option 1' },
-        { id: 2, name: 'Option 2', value: 'option2', label: 'Option 2' },
-        { id: 3, name: 'Option 3', value: 'option3', label: 'Option 3', disabled: true },
-        { id: 4, name: 'Option 4', value: 'option4', label: 'Option 4' },
-        { id: 5, name: 'Option 5', value: 'option5', label: 'Option 5' },
-        { id: 6, name: 'Option 6', value: 'option6', label: 'Option 6' },
-        { id: 7, name: 'Option 7', value: 'option7', label: 'Option 7' },
-        { id: 8, name: 'Option 8', value: 'option8', label: 'Option 8' },
-        { id: 9, name: 'Option 9', value: 'option9', label: 'Option 9' },
-        { id: 10, name: 'Option 10', value: 'option10', label: 'Option 10' },
-        { id: 11, name: 'Option 11', value: 'option11', label: 'Option 11' },
-        { id: 12, name: 'Option 12', value: 'option12', label: 'Option 12' },
-        { id: 13, name: 'Option 13', value: 'option13', label: 'Option 13' },
-        { id: 14, name: 'Option 14', value: 'option14', label: 'Option 14' },
-        { id: 15, name: 'Option 15', value: 'option15', label: 'Option 15' },
+      <div>
+    <base-swiper
+      :images="[
+        'https://i0.wp.com/vasilemovileanu.com/wp-content/uploads/2018/09/Autumn.-2001.-Oil-on-canvas-65-x-60-cm.jpg?fit=1231%2C1400&ssl=1',
+        'https://i.pinimg.com/originals/00/1b/7b/001b7bc4a4cd9132918accae2c7d5c23.png',
+        'https://i.pinimg.com/736x/90/71/bc/9071bcfb179dafd923d0f90653338ea1.jpg'
       ]"
-          label="Выберите опцию"
-          hint="Подсказка"
-          error=""
-          placeholder="Выберите текст"
-          size="small"
-      >
-        <template #headerIcon>
-          <base-icon
-              name="email"
-              size="small"
-          />
-        </template>
-        <template #iconItem>
-          <base-icon
-              name="email"
-              size="small"
-          />
-        </template>
-      </base-select>
+      :paginationSettings="{ type: 'dotsWithBackground', color: 'primary' }"
+      v-model:current-slide="currentSlide"
+    />
+      <!-- :autoplay="true"
+      :autoplay-interval="2000" -->
+  </div>
+  <section>
+  medium size
+    <base-textarea class="text-area" size="medium" placeholder="test"></base-textarea>
+  </section>
+    </section>
+    <section style="height: 300px;">
+    <p></p>
+    <base-textarea class="text-area" size="custom" placeholder="test"></base-textarea>
     </section>
 
+    <section>
+      <div>
+        <base-button @click="openModal">Открыть модал</base-button>
+      </div>
+    </section>
   </div>
 </template>
 <script setup lang="ts">
-import {ref} from 'vue';
+import { ref } from 'vue';
+import { useModal } from '../src/composables/useModal';
+import MyCustomModal from './MyCustomModal.vue';
+
+const accept = ['image/*']
+
+const modal = useModal();
 
-const checkboxModel = ref(false);
-const radioModel = ref(false);
-const textAreaModel = ref('');
-const toggleModel = ref(false);
-const inputModel = ref('');
-const emailModel = ref('');
-const selectedOption = ref('option1');
-const siteModel = ref('');
-const phoneModel = ref('');
-const currencyModel = ref('');
-const selectedOptionButton = ref('1');
-const tooltipOptions = ref({
-  title: 'Tooltip Title',
-  content: 'This is a tooltip content.',
-  position: 'top',
-  trigger: 'hover',
-  theme: 'light',
-});
+const openModal = () => {
+  modal.open('myModal', { closable: true }, MyCustomModal);
+};
 
-const itemsDropdown = ref([
-  {name: 'email-sms', text: 'Clipboard Item'},
-  {name: 'help', text: 'Clipboard Item 2'},
-  {name: 'loader', text: 'Clipboard Item 32'},
-  {name: 'loader', text: 'Clipboard Item 33'},
-  {name: 'loader', text: 'Clipboard Item 34'},
-  {name: 'loader', text: 'Clipboard Item 35'},
-  {name: 'loader', text: 'Clipboard Item 31'},
-  {name: 'loader', text: 'Clipboard Item 323'},
-  {name: 'loader', text: 'Clipboard Item 351'},
-  {name: 'loader', text: 'Clipboard Item 3124'},
-  {name: 'loader', text: 'Clipboard Item 3512'},
-  {name: 'loader', text: 'Clipboard Item 3521'},
-  {name: 'loader', text: 'Clipboard Item 3512'},
-  {name: 'loader', text: 'Clipboard Item 3512'},
-]);
-const calendarModel = ref('');
-const dropdownModel = ref(false);
-const contentTooltip = ref('<p>Test lorem ipsum asd asdd dasda text lorem ipsum dolor sit amet.</p>');
+const currentSlide = ref(0);
 </script>
 
 <style lang="scss" scoped>
@@ -329,6 +162,7 @@ const contentTooltip = ref('<p>Test lorem ipsum asd asdd dasda text lorem ipsum
   margin: 0 auto;
   padding: 20px;
   font-family: Arial, sans-serif;
+  background-color: cadetblue;
 
   h1 {
     color: #2c3e50;

package/example/MyCustomModal.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <h2>Моя модалка с картинкой</h2>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <p>Это содержимое моей модалки с изображением!</p>
+    <img src="https://i.pinimg.com/736x/90/71/bc/9071bcfb179dafd923d0f90653338ea1.jpg" alt="Пример изображения" style="max-width: 100%; height: auto;" />
+    <base-button @click="closeModal">Закрыть</base-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue';
+import BaseButton from '../src/components/BaseButton/BaseButton.vue';
+import type { ICoreModalProps } from '../src/types/modal';
+
+const props = defineProps<{
+  modalProps: ICoreModalProps;
+}>();
+
+const emit = defineEmits(['close']);
+
+const closeModal = () => {
+  emit('close');
+  if (props.modalProps.closable) {
+    // Можно добавить логику закрытия через useModal, если нужно
+  }
+};
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "plugin-ui for kazaktelekom",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/assets/icons/add.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33337 8H12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 12.6667V3.33337" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/arrow-left-circle.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 16.6L7.0667 11.1667C6.42503 10.525 6.42503 9.47499 7.0667 8.83333L12.5 3.39999" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/arrow-right-circle.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.42505 16.6L12.8584 11.1667C13.5 10.525 13.5 9.47499 12.8584 8.83333L7.42505 3.39999" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/arrow-up.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.0581 7.97499L9.99974 2.91666L4.94141 7.97499" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M10 17.0833V3.05832" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/close-circle.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="24" fill="#F2F4F7"/>
+<path d="M15.9988 32.0005L32 15.9993" stroke="#475467" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32 32.0007L15.9988 15.9995" stroke="#475467" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/close.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.99927 15.0003L15 4.99958" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 15.0004L4.99927 4.99966" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/document-text.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7999 2.20999C15.3899 1.79999 14.6799 2.07999 14.6799 2.64999V6.13999C14.6799 7.59999 15.9199 8.80999 17.4299 8.80999C18.3799 8.81999 19.6999 8.81999 20.8299 8.81999C21.3999 8.81999 21.6999 8.14999 21.2999 7.74999C19.8599 6.29999 17.2799 3.68999 15.7999 2.20999Z" fill="#1AA0DB"/>
+<path d="M20.5 10.19H17.61C15.24 10.19 13.31 8.26 13.31 5.89V3C13.31 2.45 12.86 2 12.31 2H8.07C4.99 2 2.5 4 2.5 7.57V16.43C2.5 20 4.99 22 8.07 22H15.93C19.01 22 21.5 20 21.5 16.43V11.19C21.5 10.64 21.05 10.19 20.5 10.19ZM11.5 17.75H7.5C7.09 17.75 6.75 17.41 6.75 17C6.75 16.59 7.09 16.25 7.5 16.25H11.5C11.91 16.25 12.25 16.59 12.25 17C12.25 17.41 11.91 17.75 11.5 17.75ZM13.5 13.75H7.5C7.09 13.75 6.75 13.41 6.75 13C6.75 12.59 7.09 12.25 7.5 12.25H13.5C13.91 12.25 14.25 12.59 14.25 13C14.25 13.41 13.91 13.75 13.5 13.75Z" fill="#1AA0DB"/>
+</svg>

package/src/assets/icons/export.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.32031 6.49994L11.8803 3.93994L14.4403 6.49994" stroke="#0096D7" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.8809 14.1798V4.00977" stroke="#0096D7" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 12C4 16.42 7 20 12 20C17 20 20 16.42 20 12" stroke="#0096D7" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/gallery.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.66992 18.95L7.59992 15.64C8.38992 15.11 9.52992 15.17 10.2399 15.78L10.5699 16.07C11.3499 16.74 12.6099 16.74 13.3899 16.07L17.5499 12.5C18.3299 11.83 19.5899 11.83 20.3699 12.5L21.9999 13.9" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/notification-icon.svg

@@ -0,0 +1,7 @@
+
+<svg viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4" width="76" height="76" rx="38" fill="#D1FADF"/>
+<rect x="4" y="4" width="76" height="76" rx="38" stroke="#ECFDF3" stroke-width="8"/>
+<path d="M42 59.5C51.625 59.5 59.5 51.625 59.5 42C59.5 32.375 51.625 24.5 42 24.5C32.375 24.5 24.5 32.375 24.5 42C24.5 51.625 32.375 59.5 42 59.5Z" stroke="#12B76A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M34.5625 42L39.515 46.9525L49.4375 37.0475" stroke="#12B76A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/search-zoom-in.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.66675 9.75H11.8334" stroke="#0096D7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.75 11.8334V7.66669" stroke="#0096D7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.58341 17.5C13.9557 17.5 17.5001 13.9556 17.5001 9.58335C17.5001 5.2111 13.9557 1.66669 9.58341 1.66669C5.21116 1.66669 1.66675 5.2111 1.66675 9.58335C1.66675 13.9556 5.21116 17.5 9.58341 17.5Z" stroke="#0096D7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.3334 18.3334L16.6667 16.6667" stroke="#0096D7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/star.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.3067 4.68002L20.6533 9.37335C20.9733 10.0267 21.8267 10.6534 22.5467 10.7734L26.8 11.48C29.52 11.9334 30.16 13.9067 28.2 15.8534L24.8933 19.16C24.3333 19.72 24.0267 20.8 24.2 21.5734L25.1467 25.6667C25.8933 28.9067 24.1733 30.16 21.3067 28.4667L17.32 26.1067C16.6 25.68 15.4133 25.68 14.68 26.1067L10.6933 28.4667C7.84 30.16 6.10667 28.8934 6.85333 25.6667L7.8 21.5734C7.97333 20.8 7.66667 19.72 7.10667 19.16L3.8 15.8534C1.85333 13.9067 2.48 11.9334 5.2 11.48L9.45333 10.7734C10.16 10.6534 11.0133 10.0267 11.3333 9.37335L13.68 4.68002C14.96 2.13335 17.04 2.13335 18.3067 4.68002Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/trash.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 4.98332C14.725 4.70832 11.9333 4.56665 9.15 4.56665C7.5 4.56665 5.85 4.64998 4.2 4.81665L2.5 4.98332" stroke="#F04438" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.08325 4.14169L7.26659 3.05002C7.39992 2.25835 7.49992 1.66669 8.90825 1.66669H11.0916C12.4999 1.66669 12.6083 2.29169 12.7333 3.05835L12.9166 4.14169" stroke="#F04438" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.7087 7.61676L15.167 16.0084C15.0753 17.3168 15.0003 18.3334 12.6753 18.3334H7.32533C5.00033 18.3334 4.92533 17.3168 4.83366 16.0084L4.29199 7.61676" stroke="#F04438" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.6084 13.75H11.3834" stroke="#F04438" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.91675 10.4167H12.0834" stroke="#F04438" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/upload.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4271 15.5735L15.8404 18.9869L19.2538 15.5735" stroke="#667085" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.8412 5.33331V18.8933" stroke="#667085" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.6667 16.24C26.6667 22.1333 22.6667 26.9067 16 26.9067C9.33334 26.9067 5.33334 22.1333 5.33334 16.24" stroke="#667085" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>