From 195b7b37f64bcc6ff2e2b586130e7d6c182194ad Mon Sep 17 00:00:00 2001
From: suvo dip <suvo@siliconpin.com>
Date: Sat, 12 Nov 2022 04:23:40 -0800
Subject: [PATCH] update

---
 src/pages/gallery.vue  | 74 +++++++++++++++++++++---------------------
 src/pages/nn/[id].vue  | 54 ++++++++++++++++++++++++++++++
 src/pages/nn/index.vue | 38 ++++++++++++++++++++++
 typed-router.d.ts      |  2 ++
 4 files changed, 131 insertions(+), 37 deletions(-)
 create mode 100644 src/pages/nn/[id].vue
 create mode 100644 src/pages/nn/index.vue

diff --git a/src/pages/gallery.vue b/src/pages/gallery.vue
index c430542..8db0579 100644
--- a/src/pages/gallery.vue
+++ b/src/pages/gallery.vue
@@ -5,224 +5,224 @@
             class="grid place-items-center bg-blue-700  w-48 text-4xl font-bold text-white rounded-full p-1 md:mt-8 absolute md:inset-x-2/4 top-56 md:-ml-28 -mt-40 inset-x-2/4 top-72 -ml-28 gap-4">
             Gallery</div>
         <section class="overflow-hidden text-gray-700 mt-32">
-            <div class="container px-5 py-2 mx-auto lg:pt-12 lg:px-32">
+            <div class="container px-5 py-2 mx-auto lg:pt-12 lg:px-32 ">
                 <div class="flex flex-wrap -m-1 md:-m-2">
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/1.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/2.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/3.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/4.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/5.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/6.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/7.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/8.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/9.jpg">
                         </div>
                     </div>
 
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/11.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/12.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/13.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/14.jpg">
                         </div>
                     </div>
 
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/15.jpeg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/16.jpeg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/17.jpeg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/18.jpeg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/19.jpeg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/20.jpeg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/21.jpeg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/22.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/23.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/24.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/25.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/26.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/27.jpg">
                         </div>
                     </div>
 
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/28.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/29.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/30.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/31.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/32.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/32.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/33.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/34.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/35.jpg">
                         </div>
                     </div>
                     <div class="flex flex-wrap w-1/3">
                         <div class="w-full p-1 md:p-2">
-                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                 src="/img/36.jpg">
                         </div>
                     </div>
diff --git a/src/pages/nn/[id].vue b/src/pages/nn/[id].vue
new file mode 100644
index 0000000..34cc38c
--- /dev/null
+++ b/src/pages/nn/[id].vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="container-fluid bg-white mx-auto mt-3  p-0">
+        <div v-if="isLoading">
+            <h2 class="ml-28 text-4xl"> Page Loading ...</h2>
+        </div>
+        <div v-else>
+            
+                
+         
+                
+        <div class="grid grid-cols-1 md:grid-cols-2">
+            <div class="grid p-6"><h2 class="text-2xl font-semibold"> {{page[0].name}}</h2>
+                <h2 class="text-blue-700">By. {{page[0].author}}</h2>
+                    <h2 class="text-2xl font-semibold">Price. {{page[0].Price}}</h2>
+                    <img    :src="'https://api8.siliconpin.com/assets/'+page[0].img" alt="">
+                        <h2 class="text-red-900 font-bold text-xl mt-8">Book Details</h2>
+                            <div class="text-justify text-center " v-html="page[0].details"></div>
+                                <h2 class="text-xl font-semibold text-blue-700">Publishing Year {{page[0].Publishing_Year}}</h2>
+                </div>
+                <div>
+                
+            </div></div>
+        
+        
+        
+            
+        </div>
+    </div>
+    </template>
+
+
+
+
+<script>
+    export default {
+        data() {
+            return {
+                page: null,
+                isLoading: true
+                
+            }
+        },
+        mounted: function (){
+            fetch('https://api8.siliconpin.com/items/books?filter[slug][_in]='+this.$route.params.id)
+            
+            .then(response => response.json())
+            .then(data => {
+            this.page = data.data
+            this.isLoading = false
+            console.log(this.page.Publishingyear)
+            })
+        }
+    }
+</script>
diff --git a/src/pages/nn/index.vue b/src/pages/nn/index.vue
new file mode 100644
index 0000000..e84270d
--- /dev/null
+++ b/src/pages/nn/index.vue
@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <div v-if="isLoading">
+        <h2 class="text-center text-4xl text-pink-600 font-extrabold">Loading......</h2></div>
+            <div v-else> 
+                <div class="container mx-auto text-blue-800 " v-for="(item, index) in page">
+            <router-link :to="'/nn/'+item.slug"><h3>{{item.name}}   </h3></router-link>
+            
+            
+                
+            
+             </div></div>
+
+    </div>
+</template>
+
+
+
+
+<script>
+    export default {
+        data() {
+            return {
+                page: null,
+                isLoading: true
+            }
+        },
+        mounted: function (){
+            fetch('https://api8.siliconpin.com/items/books?')
+            
+            .then(response => response.json())
+            .then(data => {
+            this.page = data.data
+            this.isLoading = false
+            })
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/typed-router.d.ts b/typed-router.d.ts
index 29722c2..51e608d 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -44,6 +44,8 @@ declare module 'vue-router/auto/routes' {
     '/documents/[id]': RouteRecordInfo<'/documents/[id]', '/documents/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/gallery': RouteRecordInfo<'/gallery', '/gallery', Record<never, never>, Record<never, never>>,
     '/index2': RouteRecordInfo<'/index2', '/index2', Record<never, never>, Record<never, never>>,
+    '/nn/': RouteRecordInfo<'/nn/', '/nn', Record<never, never>, Record<never, never>>,
+    '/nn/[id]': RouteRecordInfo<'/nn/[id]', '/nn/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/notice/': RouteRecordInfo<'/notice/', '/notice', Record<never, never>, Record<never, never>>,
     '/notice/[id]': RouteRecordInfo<'/notice/[id]', '/notice/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/temp/google': RouteRecordInfo<'/temp/google', '/temp/google', Record<never, never>, Record<never, never>>,