🔃🔃

naneps · Sep 6, 2022 · bfb5f6a · bfb5f6a
1 parent 1dee211
commit bfb5f6a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/components/MainSection.vue b/components/MainSection.vue
@@ -1,17 +1,18 @@
 <template>
-    <div>
+    <div class="border-x " :class="twitterBorderColor">
         <div class="sticky top-0 py-3 px-4 bg-white/90 backdrop-blur-md dark:bg-dim-900/80">    
             <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100">{{ props.title }}</h2>
         </div>
-        <div v-if="loading">
-            <span>Loading</span>
+        <div v-if="props.loading" class="flex items-center justify-center p-4 border-b " :class="twitterBorderColor">
+           <UISpinner/>
         </div>
        <div v-else>
             <slot></slot>
         </div>
     </div>
 </template>
 <script setup>
+    const {twitterBorderColor} = useTailwindConfig()
     const props = defineProps({
         title: {
             type: String,

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,8 +1,10 @@
 <template>
     <div>
-        <MainSection title="Home" :loading="false">
+        <MainSection title="Home" :loading="loading">
             Content
         </MainSection> 
     </div>
 </template>
-<script setup></script>
+<script setup>
+    const loading = ref(false)
+</script>