Дмитрий
73 lines
2.1 KiB
Vue
73 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import ProjectCard from './ProjectCard.vue';
|
|
|
|
const base = {
|
|
id: 1,
|
|
name: 'Окна СПб',
|
|
signal_type: 'site' as const,
|
|
signal_identifier: 'okna.ru',
|
|
daily_limit_target: 50,
|
|
delivered_today: 32,
|
|
is_active: true,
|
|
archived_at: null,
|
|
sync_status: 'ok' as const,
|
|
};
|
|
|
|
const okProject = base;
|
|
const pendingProject = { ...base, sync_status: 'pending' as const };
|
|
const failedProject = { ...base, sync_status: 'failed' as const };
|
|
const pausedProject = { ...base, is_active: false };
|
|
</script>
|
|
|
|
<template>
|
|
<Story title="Projects / ProjectCard" :layout="{ type: 'single', iframe: true }">
|
|
<Variant title="Sync OK (active)">
|
|
<v-app>
|
|
<v-main class="story-pane">
|
|
<div class="card-wrap">
|
|
<ProjectCard :project="okProject" :selected="false" />
|
|
</div>
|
|
</v-main>
|
|
</v-app>
|
|
</Variant>
|
|
<Variant title="Sync pending">
|
|
<v-app>
|
|
<v-main class="story-pane">
|
|
<div class="card-wrap">
|
|
<ProjectCard :project="pendingProject" :selected="false" />
|
|
</div>
|
|
</v-main>
|
|
</v-app>
|
|
</Variant>
|
|
<Variant title="Sync failed">
|
|
<v-app>
|
|
<v-main class="story-pane">
|
|
<div class="card-wrap">
|
|
<ProjectCard :project="failedProject" :selected="false" />
|
|
</div>
|
|
</v-main>
|
|
</v-app>
|
|
</Variant>
|
|
<Variant title="Paused">
|
|
<v-app>
|
|
<v-main class="story-pane">
|
|
<div class="card-wrap">
|
|
<ProjectCard :project="pausedProject" :selected="false" />
|
|
</div>
|
|
</v-main>
|
|
</v-app>
|
|
</Variant>
|
|
</Story>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.story-pane {
|
|
background: #f6f3ec;
|
|
min-height: 100vh;
|
|
padding: 24px;
|
|
}
|
|
.card-wrap {
|
|
width: 360px;
|
|
}
|
|
</style>
|