User: я тебе кину 2 компонента , первый это список контактов, а второй карточка контакта , из них надо сдлеать форму, используй tailwind, vee validate/nuxt, nuxt , typescript, щас кину компоненты 
Assistant:  ОтОтлично, жду твои компоненты. После этого я помогу сделать из них форму с использованием Tailwind, vee-validate, Nuxt и TypeScript.
User: карточка контакта <script lang="ts" setup>
import { useClipboard } from "@vueuse/core";

export type Contact = {
  phoneNumber: string;
  email: string;
  link: string;
  comment: string;
  fullName: string;
  position: string;
};

type Props = {
  item: Contact;
  isEdit: boolean;
};

const snackbar = useSnackbar();

const props = defineProps<Props>();

const { copy } = useClipboard();

const handleCopy = async (value: string) => {
  try {
    await copy(value);
    snackbar.add({ type: "success", text: "Скопировано" });
  } catch (e) {
    console.error(e);
  }
};
</script>

<template>
  <div class="bg-dark-black rounded-xl p-4 flex flex-col gap-4">
    <div class="flex flex-row justify-between items-center">
      <div class="flex flex-col gap-2 text-start">
        <NText class="text-lg font-semibold">{{ item.fullName }}</NText>
        <NText class="text-primary" size="sm">{{ item.position }}</NText>
      </div>
      <div v-if="isEdit" class="bg-danger/10 p-2 rounded-md flex-shrink-0">
        <NIcon name="trash" class="text-danger w-6 h-6" size="24" />
      </div>
    </div>

    <div class="flex flex-col gap-2">
      <div
        class="flex flex-row gap-2 py-1 pr-2 pl-1 items-center bg-[#1D1F22] rounded-lg cursor-pointer"
      >
        <div class="bg-primary p-1 rounded-lg">
          <NIcon name="phone" class="text-white" size="20" />
        </div>
        <NText size="sm">{{ item.phoneNumber }}</NText>
        <div @click="handleCopy(item.phoneNumber)" class="ml-auto">
          <NIcon name="copy" class="text-white hover:text-primary" size="20" />
        </div>
      </div>

      <div
        class="flex flex-row gap-2 py-1 pr-2 pl-1 items-center bg-[#1D1F22] rounded-lg cursor-pointer"
      >
        <div class="bg-primary p-1 rounded-lg">
          <NIcon name="mail" class="text-white" size="20" />
        </div>
        <NText size="sm">{{ item.email }}</NText>
        <div @click="handleCopy(item.email)" class="ml-auto">
          <NIcon name="copy" class="text-white hover:text-primary" size="20" />
        </div>
      </div>

      <div
        class="flex flex-row gap-2 py-1 pr-2 pl-1 items-center bg-[#1D1F22] rounded-lg cursor-pointer"
      >
        <div class="bg-primary p-1 rounded-lg">
          <NIcon name="message" class="text-white" size="20" />
        </div>
        <NText size="sm">{{ item.link }}</NText>
        <div @click="handleCopy(item.link)" class="ml-auto">
          <NIcon name="copy" class="text-white hover:text-primary" size="20" />
        </div>
      </div>
      <div
        v-if="item.comment"
        class="py-1 pr-2 pl-1 bg-[#1D1F22] rounded-lg cursor-pointer"
      >
        <NText size="sm">{{ item.comment }}</NText>
      </div>
    </div>
  </div>
</template>

Assistant:  ОтОтлично, теперь жду второй компонент — список контактов. После этого я сделаю форму, используя Tailwind, vee-validate, Nuxt и TypeScript.
User: список контактов <script lang="ts" setup>
import { ref } from "vue";

const searchTerm = ref("");

const isEdit = ref(false);

const data = [
  {
    phoneNumber: "+7 (999) 999 99 99",
    email: "Lishin2212318@mail.com",
    link: "@LishinPavel2123128",
    comment: "Отвечает с 10 до 19",
    fullName: "Фамилия Имя Отчество",
    position: "Должность",
  },
];
</script>

<template>
  <NModal title="Контакты">
    <template #headerButton>
      <div
        @click="() => (isEdit = !isEdit)"
        class="hover:bg-white-trans transition-all rounded-lg p-2 cursor-pointer"
      >
        <NIcon name="pencil" size="24" class="text-white" />
      </div>
    </template>
    <div class="p-5 flex flex-col gap-3">
      <div class="flex flex-row gap-2">
        <NSearch
          v-model="searchTerm"
          param-name="q-contacts"
          input-class="w-full"
          placeholder="Поиск..."
        />
        <NButton v-if="isEdit" variant="secondary" size="sm" icon="plus"
          >Создать</NButton
        >
      </div>
      <div v-for="(item, i) in data" :key="i">
        <ContactCard :item="item" :isEdit="isEdit" />
      </div>
    </div>
  </NModal>
</template>
 
Assistant: