Home Page

- Installed TailwindUI
- Changed the layout
- Added a new breakpoint

layouts/default.vue

@@ -29,10 +29,7 @@
           leave-to-class="opacity-0"
         >
           <div class="fixed inset-0">
-            <div
+            <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
-              class="absolute inset-0 bg-gray-600 opacity-75"
-              @click="toggleSidebar"
-            ></div>
           </div>
         </transition>
         <!--
@@ -60,7 +57,6 @@
               <button
                 class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600"
                 aria-label="Close sidebar"
-                @click="toggleSidebar"
               >
                 <svg
                   class="h-6 w-6 text-white"

package-lock.json

@@ -1956,6 +1956,32 @@
         }
       }
     },
+    "@tailwindcss/custom-forms": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz",
+      "integrity": "sha512-XdP5XY6kxo3x5o50mWUyoYWxOPV16baagLoZ5uM41gh6IhXzhz/vJYzqrTb/lN58maGIKlpkxgVsQUNSsbAS3Q==",
+      "requires": {
+        "lodash": "^4.17.11",
+        "mini-svg-data-uri": "^1.0.3",
+        "traverse": "^0.6.6"
+      }
+    },
+    "@tailwindcss/typography": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.2.0.tgz",
+      "integrity": "sha512-aPgMH+CjQiScLZculoDNOQUrrK2ktkbl3D6uCLYp1jgYRlNDrMONu9nMu8LfwAeetYNpVNeIGx7WzHSu0kvECg=="
+    },
+    "@tailwindcss/ui": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/ui/-/ui-0.7.2.tgz",
+      "integrity": "sha512-7HuFoWUMfVdY8EWEIS2FSJBCj+iEWL4JfljVE6Wd5qLrQrCzH10tuE0S6697jPm7dt8ZUEslFWlJtAsU76A5Nw==",
+      "requires": {
+        "@tailwindcss/custom-forms": "^0.2.1",
+        "@tailwindcss/typography": "^0.2.0",
+        "hex-rgb": "^4.1.0",
+        "postcss-selector-parser": "^6.0.2"
+      }
+    },
     "@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
@@ -6475,6 +6501,11 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "hex-rgb": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.2.0.tgz",
+      "integrity": "sha512-I7DkKeQ2kR2uyqgbxPgNgClH/rfs1ioKZhZW8VTIAirsxCR5EyhYeywgZbhMScgUbKCkgo6bb6JwA0CLTn9beA=="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -8240,6 +8271,11 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
     },
+    "mini-svg-data-uri": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
+      "integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ=="
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -12013,6 +12049,11 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
     },
+    "traverse": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
+      "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc="
+    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.12.2",
     "@nuxtjs/pwa": "^3.0.2",
+    "@tailwindcss/ui": "^0.7.2",
     "core-js": "^3.6.5",
     "magic-sdk": "^3.0.1",
     "nuxt": "^2.14.6"

pages/index.vue

@@ -2,7 +2,7 @@
   <div>
     <!-- Page title & actions -->
     <div
-      class="border-b border-gray-200 px-4 py-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8"
+      class="border-b border-gray-200 px-4 py-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8 mb-4"
     >
       <div class="flex-1 min-w-0">
         <h1 class="text-lg font-medium leading-6 text-gray-900 sm:truncate">
@@ -28,6 +28,132 @@
         </span>
       </div>
     </div>
+    <div class="px-2">
+      <h4 class="mb-2">Popular Videos</h4>
+      <ul
+        class="space-y-12 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 sm:space-y-0 lg:grid-cols-3 lg:gap-x-8 xxl:grid-cols-4 xxl:gap-x-8"
+      >
+        <li v-for="i in [1, 2, 3, 4]" :key="i">
+          <div class="space-y-4">
+            <div class="relative pb-2/3">
+              <img
+                class="absolute object-cover h-full w-full shadow-lg rounded-lg"
+                src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80"
+                alt=""
+              />
+            </div>
+
+            <div class="space-y-2">
+              <div class="text-lg leading-6 font-medium space-y-1">
+                <h4>Lindsay Walton</h4>
+                <p class="text-indigo-600">Front-end Developer</p>
+              </div>
+              <ul class="flex space-x-5">
+                <li>
+                  <a
+                    href="#"
+                    class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150"
+                  >
+                    <span class="sr-only">Twitter</span>
+                    <svg
+                      class="w-5 h-5"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path
+                        d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"
+                      />
+                    </svg>
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150"
+                  >
+                    <span class="sr-only">LinkedIn</span>
+                    <svg
+                      class="w-5 h-5"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </li>
+      </ul>
+      <h4 class="mt-4 mb-2">New videos</h4>
+      <ul
+        class="mb-2 space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:grid-cols-3 lg:gap-8 xxl:grid-cols-6 xxl:gap-10"
+      >
+        <li
+          v-for="i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
+          :key="i"
+          class="py-10 px-6 bg-gray-800 text-center rounded-lg xl:px-10 xl:text-left"
+        >
+          <div class="space-y-6 xl:space-y-10">
+            <img
+              class="mx-auto h-40 w-40 rounded-full xl:w-56 xl:h-56"
+              src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80"
+              alt=""
+            />
+            <div class="space-y-2 xl:flex xl:items-center xl:justify-between">
+              <div class="font-medium text-lg leading-6 space-y-1">
+                <h4 class="text-white">Leonard Krasner</h4>
+                <p class="text-indigo-400">Senior Designer</p>
+              </div>
+
+              <ul class="flex justify-center space-x-5">
+                <li>
+                  <a
+                    href="#"
+                    class="text-gray-400 hover:text-gray-300 transition ease-in-out duration-150"
+                  >
+                    <span class="sr-only">Twitter</span>
+                    <svg
+                      class="w-5 h-5"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path
+                        d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"
+                      />
+                    </svg>
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    class="text-gray-400 hover:text-gray-300 transition ease-in-out duration-150"
+                  >
+                    <span class="sr-only">LinkedIn</span>
+                    <svg
+                      class="w-5 h-5"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 

store/auth.js

@@ -1,6 +1,8 @@
 export const state = () => ({
   token: null,
   loggedIn: false,
+  loading: false,
+  profile: null,
 })
 
 export const mutations = {
@@ -10,4 +12,16 @@ export const mutations = {
   setLoggedIn(state, loggedIn) {
     state.loggedIn = loggedIn
   },
+  setLoading(state, loading) {
+    state.loading = loading
+  },
+  setProfile(state, profile) {
+    state.profile = profile
+  },
+}
+
+export const actions = {
+  loadProfile({ commit }) {
+    commit('setProfile')
+  },
 }

tailwind.config.js

@@ -0,0 +1,31 @@
+module.exports = {
+  future: {
+    removeDeprecatedGapUtilities: true,
+    purgeLayersByDefault: true,
+  },
+  theme: {
+    screens: {
+      dark: { raw: '(prefers-color-scheme: dark)' },
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      xxl: '1920px',
+    },
+  },
+  variants: {},
+  plugins: [require('@tailwindcss/ui')],
+  purge: {
+    enabled: process.env.NODE_ENV === 'production',
+    content: [
+      'components/**/*.vue',
+      'layouts/**/*.vue',
+      'pages/**/*.vue',
+      'plugins/**/*.js',
+      'nuxt.config.js',
+      // TypeScript
+      'plugins/**/*.ts',
+      'nuxt.config.ts',
+    ],
+  },
+}