Resource Picker ​

<script setup lang="ts">
import { ResourcePicker } from '@youcan/ui-vue3';
import type { Resource } from '@youcan/ui-vue3/dist/types/components/ResourcePicker/types';
import { ref } from 'vue';

const MOCK_RESOURCES: Resource[] = [
  {
    id: 1,
    thumbnailUrl: '',
    name: 'Apple MacBook Pro',
    price: '$2,499.00',
    stock: 7,
    isChecked: false,
    variants: [
      {
        id: 33,
        thumbnailUrl: '',
        name: 'Apple MacBook Pro 16 M3 Max',
        price: '$3,499.00',
        stock: 3,
        isChecked: false,
      },
      {
        id: 21,
        thumbnailUrl: '',
        name: 'Apple MacBook Pro 14 M3 Pro',
        price: '$2,499.00',
        stock: 4,
        isChecked: false,
      },
    ],
  },
  {
    id: 2,
    thumbnailUrl: '',
    name: 'Apple iMac',
    price: '$1,499.00',
    stock: 2,
    isChecked: false,
  },
];

const showPicker = ref(false);
const selectedResources = ref<Resource[]>([]);

const onConfirm = (resources: Resource[]) => {
  selectedResources.value = resources;
  showPicker.value = false;
};
</script>

<template>
  <div className="container">
    <ResourcePicker
      v-model:visible="showPicker"
      :resources="MOCK_RESOURCES"
      stock-label="in stock"
      :is-loading="false"
      @confirm="onConfirm"
    />
    <PrimaryButton @click="showPicker = true;">
      <span>Open Picker</span>
    </PrimaryButton>
  </div>
</template>