forked from nuxt/modules
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: split filters, header, footer and stats
- Loading branch information
Showing
5 changed files
with
151 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <template> | ||
| <div class="container px-4 pt-12 pb-8 mx-auto sm:px-0"> | ||
| <!-- Search --> | ||
| <div class="flex shadow-sm sm:max-w-lg sm:mx-auto"> | ||
| <label class="relative flex-1"> | ||
| <input | ||
| ref="searchModule" | ||
| v-model="filters.q" | ||
| type="search" | ||
| aria-label="Search" | ||
| class="block w-full py-3 pl-3 pr-3 text-base leading-6 placeholder-gray-500 transition duration-150 ease-in-out border appearance-none md:pr-10 border-rainy-grey rounded-tl-md rounded-bl-md focus:ring-3 focus:ring-green-300 focus:ring-opacity-50 focus:outline-none focus:placeholder-gray-400 sm:flex-1" | ||
| placeholder="Search a module (name, category, username, etc.)" | ||
| > | ||
| <span class="absolute hidden px-2 py-1 text-gray-400 border border-gray-300 rounded-md opacity-50 md:inline-block text-md top-13 right-13 leading-14"> | ||
| / | ||
| </span> | ||
| </label> | ||
| <button type="button" aria-label="search" class="px-6 py-3 text-base font-medium leading-6 text-gray-700 transition duration-150 ease-in-out bg-rainy-grey hover:bg-grey-light focus:bg-grey-light rounded-tr-md rounded-br-md focus:outline-none focus:ring-3 focus:ring-green-300 focus:ring-opacity-50 sm:mt-0 sm:flex-shrink-0 sm:inline-flex sm:items-center sm:w-auto"> | ||
| <IconSearch alt="Search" /> | ||
| </button> | ||
| </div> | ||
|
|
||
| <!-- Categories --> | ||
| <div class="flex pt-6 space-x-2 overflow-x-auto sm:flex-wrap sm:justify-center"> | ||
| <button | ||
| v-for="category of categories" | ||
| :key="category" | ||
| type="button" | ||
| :aria-label="category" | ||
| class="px-4 py-2 mb-2 text-sm rounded cursor-pointer focus:outline-none" | ||
| :class="[ selectedCategory === category ? 'bg-forest-night text-white' : 'text-forest-night bg-rainy-grey hover:bg-grey-light focus:bg-grey-light']" | ||
| @click="toggleCategory(category)" | ||
| > | ||
| {{ category }} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| props: { | ||
| value: { | ||
| type: Object, | ||
| required: true | ||
| } | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <template> | ||
| <footer class="container flex flex-col items-center justify-center pt-12 mx-auto text-stone-green"> | ||
| <p>For more information on Nuxt modules, including how to create a module, check out our <a href="https://nuxtjs.org/guides/directory-structure/modules" rel="noopener" target="_blank" class="items-center space-x-1 leading-4 border-b text-md text-grey border-stone-green hover:text-green-500 hover:border-green-600">docs</a>.</p> | ||
| <div class="flex justify-center px-4 pt-6 space-x-2 sm:px-0"> | ||
| <a href="https://vercel.com" rel="noopener" target="_blank" aria-label="go to vercel"> | ||
| <IconVercel alt="Vercel" /> | ||
| </a> | ||
| <a href="https://nuxtjs.org" rel="noopener" target="_blank" aria-label="go to nuxt"> | ||
| <IconWithNuxt alt="Nuxt" /> | ||
| </a> | ||
| </div> | ||
| </footer> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <template> | ||
| <div class="pt-16 pb-16 bg-forest-night sm:pb-24"> | ||
| <div class="px-4 pb-10 text-center sm:px-6 lg:px-8"> | ||
| <div class="flex justify-center"> | ||
| <IconNuxt alt="Nuxt" /> | ||
| </div> | ||
| <h1 class="mt-4 text-4xl font-extrabold leading-10 text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl"> | ||
| Explore Nuxt Modules | ||
| </h1> | ||
| <p class="max-w-xl mx-auto mt-5 text-lg leading-7 sm:text-xl text-rainy-grey"> | ||
| Discover our list of modules to supercharge your <a href="https://nuxtjs.org" rel="noopener" target="_blank" class="border-b border-stone-green hover:text-green-500 hover:border-green-600">Nuxt project</a>. Created by the Nuxt team and community. | ||
| </p> | ||
| <div class="max-w-xl mx-auto mt-2 text-center"> | ||
| <a href="https://github.com/nuxt/modules" rel="noopener" target="_blank" class="items-center space-x-1 leading-4 border-b text-md text-grey-light border-stone-green hover:text-green-500 hover:border-green-600"> | ||
| Contribute on GitHub | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <template> | ||
| <div class="relative max-w-screen-xl px-4 mx-auto -mt-16 sm:px-6 lg:px-8"> | ||
| <div class="max-w-4xl mx-auto"> | ||
| <dl class="bg-white rounded-lg shadow-lg sm:grid sm:grid-cols-3"> | ||
| <div class="flex justify-center p-4 text-center border-b border-gray-100 sm:flex-col sm:p-6 sm:border-0 sm:border-r"> | ||
| <dt id="item-1" class="order-2 ml-2 font-medium leading-6 text-gray-500 sm:mt-2 sm:ml-0 sm:text-md sm:capitalize"> | ||
| modules | ||
| </dt> | ||
| <dd class="order-1 text-2xl font-extrabold leading-none text-green-700 sm:text-4xl" aria-describedby="item-1"> | ||
| {{ modules.length }} | ||
| </dd> | ||
| </div> | ||
| <div class="flex justify-center p-4 text-center border-t border-b border-gray-100 sm:flex-col sm:p-6 sm:border-0 sm:border-l sm:border-r"> | ||
| <dt class="order-2 ml-2 font-medium leading-6 text-gray-500 sm:mt-2 sm:ml-0 sm:text-md sm:capitalize"> | ||
| downloads last 30 days | ||
| </dt> | ||
| <dd class="order-1 text-2xl font-extrabold leading-none text-green-700 sm:text-4xl"> | ||
| {{ numberFormat(downloadsTotal) }} | ||
| </dd> | ||
| </div> | ||
| <div class="flex justify-center p-4 text-center border-t border-gray-100 sm:flex-col sm:p-6 sm:border-0 sm:border-l"> | ||
| <dt class="order-2 ml-2 font-medium leading-6 text-gray-500 sm:mt-2 sm:ml-0 sm:text-md sm:capitalize"> | ||
| maintainers | ||
| </dt> | ||
| <dd class="order-1 text-2xl font-extrabold leading-none text-green-700 sm:text-4xl"> | ||
| {{ maintainersTotal }} | ||
| </dd> | ||
| </div> | ||
| </dl> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { numberFormatter } from '~/utils/format.ts' | ||
| export default defineComponent({ | ||
| props: { | ||
| modules: { | ||
| type: Array, | ||
| required: true | ||
| }, | ||
| maintainersTotal: { | ||
| type: Number, | ||
| required: true | ||
| }, | ||
| downloadsTotal: { | ||
| type: Number, | ||
| required: true | ||
| } | ||
| }, | ||
| methods: { | ||
| numberFormat (num, options = { precision: 1 }) { | ||
| return numberFormatter(num, options) | ||
| } | ||
| } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters