Improvement

index.html

@@ -40,7 +40,7 @@
 
 		.grid-container {
 			display: grid;
-			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+			grid-template-columns: repeat(3, minmax(300px, 1fr));
 			grid-gap: 10px;
       margin-top: 3.5rem;
       margin-left: 3.5rem;
@@ -71,53 +71,62 @@
 
       Alpine.data("themesData", () => ({
         async init() {
-          const data = await this.getThemes(this.page, this.sort, this.filter);
-          this.themes = data.pageThemes;
-          console.log(this.themes);
+          const data = await this.getThemes(this.page, this.sort, this.useTestData);
+          this.themes = data.themes;
           this.totalPages = data.totalPages;
-          console.log(this.totalPages);
         },
         themes: [],
         filter: "all",
         sort: "likes",
         page: 1,
         totalPages: -1,
+        useTestData: false,
         buttonClass(attr, filter) {
           if (this[attr] === filter) {
             return "bg-black dark:bg-white shadow-lg text-white dark:text-black hover:bg-black hover:text-white";
           }
           return "text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800";
         },
-        async sortModels(sort) {
-        //   this.sort = sort;
-        //   this.page = 1;
-        //   const data = await this.getModels(this.page, this.sort, this.filter);
-        //   this.models = data.models;
-        //   this.totalPages = data.totalPages;
+        async switchData() {
+          this.page = 1;
+          this.useTestData = !this.useTestData;
+          const data = await this.getThemes(this.page, this.sort, this.useTestData);
+          this.themes = data.themes;
+          this.totalPages = data.totalPages;
+        },
+        async sortThemes(sort) {
+          this.sort = sort;
+          this.page = 1;
+          const data = await this.getThemes(this.page, this.sort, this.useTestData);
+          this.themes = data.themes;
+          this.totalPages = data.totalPages;
         },
-        async getThemes(page, sort, style) {
+        async getThemes(page, sort, useTestData) {
+          const filename = useTestData ? "test_data.json" : "subdomains.json"
           const res = await fetch(
-            'https://huggingface.co/datasets/freddyaboulton/gradio-theme-subdomains/resolve/main/subdomains.json'
+            `https://huggingface.co/datasets/freddyaboulton/gradio-theme-subdomains/resolve/main/${filename}`
           );
           const data = await res.json();
-          const themes = Object.entries(data).map(([key, value]) => ({
-            id: key,
-            subdomain: value,
-          }))
+          if(sort === 'likes') {
+            data.sort((a, b) => (b.likes - a.likes));
+          }else {
+            data.sort((a, b) => (new Date(b.lastModified) - new Date(a.lastModified)));
+          }
+          const pageThemes = data.slice((page - 1) * 30, page * 30);
 
-          const pageThemes = themes.slice((page - 1) * 30, page * 30);
+          console.log(pageThemes);
 
           return {
-            pageThemes,
-            totalPages: Math.floor(themes.length + 30  - 1, 30)
+            themes: pageThemes,
+            totalPages: Math.floor(data.length + 30  - 1, 30)
           };
         },
         async nextPage() {
           if (this.page < this.totalPages) {
             this.page += 1;
-            const data = await this.getThemes(this.page, this.sort, this.filter);
-            this.themes = this.themes.concat(data.pageThemes);
-            // this.totalPages = data.totalPages;
+            const data = await this.getThemes(this.page, this.filter, this.useTestData);
+            this.themes = this.themes.concat(data.themes);
+            this.totalPages = data.totalPages;
           }
         },
       }));
@@ -139,18 +148,29 @@
             <button
             :class="buttonClass('sort', 'likes')"
             class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
-            @click="sortModels('likes')"
+            @click="sortThemes('likes')"
             >
               Most Likes
             </button>
             <button
               :class="buttonClass('sort', 'recent')"
               class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
-              @click="sortModels('recent')"
+              @click="sortThemes('recent')"
             >
               Recent
             </button>
           </div>
+          <div class="flex gap-0">
+            <input type="checkbox" @click="switchData()" class="rounded">
+            <span class="md:px-3 py-1 dark:text-white text-gray-400 ml-0">Use Test Data</span>
+            <!-- <button
+              :class="buttonClass('useTestData', false)"
+              class="px-2 md:px-3 py-1 rounded-full"
+              @click="switchData()"
+            >
+              Use Test Data
+            </button> -->
+          </div>
         </div>
       </section>
       <div class="grid-container">