PlaceHolder,attachment

src/components/MainMenu.astro

@@ -64,6 +64,7 @@
           <div class="drop-content">
             <a href="/iqac">IQAC</a>
             <a href="/naac">NAAC</a>
+            <a href="/ncc">NCC</a>
             <a href="/nirf-data">NIRF</a>
             <a href="/aqar">AQAR</a>
             <a href="/students-union">Student's Union</a>

src/components/NoticePage.vue

@@ -1,9 +1,10 @@
 <template>
     <div class="container bg-white mx-auto mt-3  p-4 text-blue-700 leading-loose">
-        <div v-if="isLoading">
+        <h2 class="text-3xl font-bold italic text-center text-black pb-4 underline decoration-blue-600 ">All Notice</h2>
-            <h2>Loading ...</h2>
+        <div v-if="isLoading" class="">
+            <div class="bg-gray-200 h-screen border-2 border-gray-300 shadow-2xl rounded-md opacity-500"></div>
         </div>
-        <div v-else>
+        <div v-else class=" flex flex-col border-2 border-gray-300 px-4 rounded-lg shadow-2xl">
             <div  v-for="(item, index) in page" >
                 <a :href="'/notice/'+item.slug"> <h3> {{item.title}}</h3> </a>
 

src/components/RoutePage.vue

@@ -1,14 +1,27 @@
 <template>
-    <div class="container mx-auto px-4 text-justify">
+    <div class="container mx-auto px-4 text-justify mt-16">
-        <div v-if="content">
+        <div v-if="isLoading" class="">
-            <div v-html="content"></div>
+            <div class="bg-gray-200 h-screen border-2 border-gray-300 shadow-2xl rounded-md opacity-500"></div>
         </div>
-        <div v-else class="text-center font-bold text-4xl font-smooth py-16 text-gray-600 ">
+            <div v-else class="">
-            loading
+                <div v-if="content" class="w-full flex flex-col justify-center place-items-center">
-        </div>
+                    <h2 class="text-2xl text-center pb-4  font-bold">{{ page.title }}</h2>
-        <div v-if="fileAttached">
+                    <div class=" border-2 border-gray-300 shadow-2xl rounded-md opacity-500 p-4">
+                        <div class="w-[100%]]" v-html="content"></div>
+                    </div>
+                </div>
+                <div class="pt-10 flex flex-col justify-start place-items-start" v-if="fileAttached">
+                    <h2>Attachments</h2>
+                    <div v-for="file in files" :key="file.id">
+                        <a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">
+                            {{ file.filename_download }}
+                        </a>
+                        <!-- <a class="" :href="'https://api8.siliconpin.com/assets/' + file"></a> -->
+                    </div>
+                </div>
+            </div>
+        
         
-        </div>
     </div>
 </template>
 <script>
@@ -19,16 +32,19 @@ export default {
             attachment:null,
             content:null,
             isLoading: true,
-            files:null,
+            files: null,
             fileAttached:false
         }
     },
     mounted: function () {
-        
         let path=window.location.pathname.split('/');
+        let slug=path[1]
         // console.log(path[1]);
-        if(path[1]==='notice' || path[1]==='documents' ){
+        if(path[1]==='notice' || path[1]==='documents'){
-            let queryP='https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&filter[slug][_eq]='+path[2];
+            slug =path[2]
+        }
+        
+            let queryP='https://api8.siliconpin.com/items/scc22?filter[slug][_eq]='+slug;
             fetch(queryP)
             .then(response => response.json())
             .then(data => {
@@ -66,20 +82,6 @@ export default {
             .catch((error) => {
                 console.log(error)
                 });
-        }
-        
-        else{
-            // fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1')
-            let queryP='https://api8.siliconpin.com/items/scc22?filter[slug][_eq]='+path[1];
-            fetch(queryP)
-                .then(response => response.json())
-                .then(data => {
-            this.page = data.data[0]
-            this.content = this.page.content
-            //   console.log(data)
-            this.isLoading = false
-            })
-        }
         
     }
 }