Feature/product page (#83)

* add product page

README.md

@@ -4,6 +4,7 @@
 Инструкции по редактированию контента:
 - [Описание синтаксиса](/doc/syntax.md);
 - [Произвольные страницы](/doc/page.md);
+- [Товары из каталога](/doc/catalog.md);
 - [Партнеры](./doc/partners.md);
 - [Интеграторы](./doc/integrators.md);
 - [Вакансии](./doc/jobs.md);

assets/css/variables.css

@@ -6,6 +6,7 @@
   --link-color: #00b7f4;
   --primary-color: #5cb300;
   --primary-color-hover: #4d9900;
+  --danger-color: #f0001c;
 
   --input-shadow: 0px 0px #0000, 0px 0px #0000, 0px 1px 2px 0px rgba(18,18,23,0.05);
   --app-bar-height: 80px;

common/links.ts

@@ -0,0 +1 @@
+export const hardwarePlaylist = 'https://peertube.wirenboard.com/w/p/dBwXZSnBMw4Tp4j3MdPXzw'

common/types.ts

@@ -28,3 +28,31 @@ export interface District {
 export interface Districts {
   [locale: Locale]: District[];
 }
+
+interface ProductOption {
+  id: number;
+  name: string;
+  image: string;
+  description: string;
+}
+
+export interface Product {
+  locale: Locale;
+  id: number;
+  discontinued: number;
+  can_order: number;
+  price: number;
+  price_min?: number;
+  price_max?: number;
+  items: {
+    available: number;
+    scheduled: number;
+    schedule_unit: 'days' | 'weeks' | 'months';
+    inv_final_assembly: number;
+    inv_ready_to_assembly: number;
+    inv_scheduled: number;
+  },
+  options: ProductOption[];
+  components: ProductOption[];
+  use_cases: string[];
+}

components/content/Gallery.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Photo from './Photo.vue';
 
-const props = defineProps<{ data: [string, string, number][]; }>();
+const props = defineProps<{ data: [string, string, number][]; withBorder?: boolean; }>();
 const photos = ref();
 const openedPhoto = ref(null);
 
@@ -49,6 +49,7 @@ watch(openedPhoto, () => {
        :src="src"
        :caption="caption"
        :height="300"
+       :withBorder="withBorder"
        isGallery
        :key="i"
        @open-photo="(openedPhotoAttr) => openedPhoto = openedPhotoAttr"

components/content/Photo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineProps<{ src: string; caption?: string; width?: number; isGallery?: boolean; float?: 'right' | 'left' | 'center'; }>();
+defineProps<{ src: string; caption?: string; width?: number; isGallery?: boolean; withBorder?: boolean; float?: 'right' | 'left' | 'center'; }>();
 
 const photo = ref();
 
@@ -12,7 +12,7 @@ defineEmits(['openPhoto']);
   <figure
     class="photo"
     :class="{
-      'photo-withCaption': caption,
+      'photo-withCaption': caption || withBorder,
       'photo-fromGallery': isGallery,
       'photo-floatRight': float === 'right',
       'photo-floatLeft': float === 'left',