Merge pull request #12 from damisparks/feat/ds-add-play

feat(dev): add play and update components

README.md

@@ -10,11 +10,13 @@
 * 🐕 [Husky](https://github.com/typicode/husky) & [Lint-staged](https://github.com/okonet/lint-staged)
 * Use [Nuxt Image](https://github.com/nuxt/image#readme)
 * Error page
+* Add [Nuxt Icon](https://github.com/nuxt-modules/icon)
 
 
 ## TODO
 
 * 📱 Mobile Detect module [@nuxtjs/device](https://www.npmjs.com/package/@nuxtjs/device/v/3.0.0?activeTab=readme)
+* Add Demo site
 
 ## Setup
 

app.vue

@@ -0,0 +1,7 @@
+
+<template>
+  <div>
+    <NuxtLoadingIndicator />
+    <NuxtPage />
+  </div>
+</template>

assets/css/tailwind.css

@@ -9,5 +9,12 @@
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     box-sizing: border-box;
+    @apply bg-gray-50;
+  }
+}
+
+@layer utilities {
+  .text-gradient {
+    @apply text-transparent bg-clip-text bg-gradient-to-r from-cyan-500 to-blue-500;
   }
 }

components/AppFooter.vue

@@ -0,0 +1,5 @@
+<template>
+  <footer aria-labelledby="footer-heading">
+    <div class="mx-auto max-w-7xl px-6 pb-8 pt-20 sm:pt-24 lg:px-8 lg:pt-32 border-t border-gray-900/10" />
+  </footer>
+</template>

components/AppNavBar.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { INavItem } from '../types'
+const navItems: INavItem[] = [
+  { name: 'Home', to: '/' },
+  { name: 'Play', to: '/play' }
+]
+</script>
+
+<template>
+  <nav class="shadow rounded-3xl px-2 py-1 border">
+    <div class="flex items-center justify-center">
+      <NuxtLink
+        v-for="{name, to} in navItems"
+        :key="name"
+        :to="to"
+        class="px-2 py-1"
+        :title="name"
+        :class="[
+          $route.path === to? 'text-gradient font-bold': 'text-slate-700 dark:text-slate-400',
+          'px-2 hover:text-slate-900 dark:hover:text-slate-200'
+        ]"
+      >
+        {{ name }}
+      </NuxtLink>
+      <a rel="noreferrer" class="ml-2 hover:text-cyan-500" href="//github.com/damisparks/nuxity" target="_blank" title="GitHub">
+        <Icon class="h-6 w-6 my-1" name="uil:github" />
+      </a>
+    </div>
+  </nav>
+</template>

components/AppTitle.vue

@@ -0,0 +1,5 @@
+<template>
+  <h1 class="text-center text-3xl font-bold leading-8 tracking-tight  text-gradient sm:text-4xl">
+    <slot />
+  </h1>
+</template>

components/ProductCard.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { IProductItem } from '~~/types'
+
+defineProps<{products: IProductItem[]}>()
+</script>
+<template>
+  <div v-for="product in products" :key="product.id" class="group">
+    <div class="aspect-w-3 aspect-h-3 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
+      <NuxtImg provider="imgix" preset="main" :src="product.imageSrc" :alt="product.imageAlt" class="h-full w-full object-cover object-center group-hover:opacity-75" />
+    </div>
+    <h3 class="mt-4 text-sm text-gray-700">
+      {{ product.name }}
+    </h3>
+    <p class="mt-1 text-lg font-medium text-gray-900">
+      {{ product.price }}
+    </p>
+    <slot :item="product" />
+  </div>
+</template>

components/QuickAccess.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const props = defineProps<{ showQuickAccess: boolean }>()
+const emit = defineEmits<{(event: 'update:quickaccess', showExplore: boolean): void}>()
+const canQuickAccess = () => {
+  emit('update:quickaccess', props.showQuickAccess)
+}
+</script>
+<template>
+  <div class="relative">
+    <div
+      v-if="showQuickAccess"
+      tabindex="-1"
+      class="fixed inset-0 bg-opacity-75 transition-opacity -z-10"
+      aria-hidden="true"
+      @click="canQuickAccess"
+    />
+    <div>
+      <button role="button" class="text-cyan-600 rounded-md shadow-xl bg-white px-2 py-1" type="button" @click="canQuickAccess">
+        <slot />
+        <Icon class="h-8 w-8 ml-2" name="fluent:cart-24-filled" />
+      </button>
+    </div>
+
+    <transition
+      enter-active-class="transition duration-100 ease-out"
+      enter-from-class="transform scale-95 opacity-0"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-active-class="transition duration-75 ease-in"
+      leave-from-class="transform scale-100 opacity-100"
+      leave-to-class="transform scale-95 opacity-0"
+    >
+      <div
+        v-show="showQuickAccess"
+        class="rounded-md shadow-xl w-72 absolute right-0 bottom-12 bg-white p-2 origin-bottom-right"
+      >
+        <slot name="items" />
+      </div>
+    </transition>
+  </div>
+</template>

layouts/default.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <AppNavBar class="max-w-md mx-auto sticky top-4 z-10 bg-white" />
+    <!-- main starts -->
+    <main>
+      <slot />
+    </main>
+    <!-- main ends -->
+
+    <!-- footer  -->
+    <AppFooter />
+  </div>
+</template>

nuxt.config.ts

@@ -1,6 +1,8 @@
 // Doc: https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/google-fonts', '@pinia/nuxt', '@nuxt/image-edge'],
+  modules: [
+    '@nuxtjs/tailwindcss', '@nuxtjs/google-fonts', '@pinia/nuxt', '@nuxt/image-edge',
+    'nuxt-icon'],
   app: {
     head: {
       title:

package.json

@@ -25,7 +25,8 @@
     "eslint": "8.35.0",
     "husky": "8.0.3",
     "lint-staged": "13.1.2",
-    "nuxt": "^3.2.2"
+    "nuxt": "^3.2.2",
+    "nuxt-icon": "0.3.2"
   },
   "dependencies": {
     "@pinia/nuxt": "0.4.7",

pages/index.vue

@@ -1,21 +1,52 @@
 <script lang="ts" setup>
-const productStore = useProductStore()
+const features = [
+  'Nuxt 3', 'TailwindCSS', 'Google fonts', 'Pinia',
+  'Eslint Nuxt', 'Husky', 'Nuxt Image', 'Error page', 'Nuxt Icon'
+]
+
 </script>
 <template>
-  <div class="flex items-center flex-col">
-    <div class="p-4 shadow-lg rounded-md mt-4">
-      <h1 class="text-4xl">
-        Welcome to Nuxity
-      </h1>
-      <NuxtImg provider="imgix" class="rounded-md my-2" src="photo-1542831371-29b0f74f9713" preset="main" />
-      <p>A Nuxt 3 Minimal Starter template packed with a few features.</p>
-      <p>
-        <span>You have</span>
-        <span class="bg-blue-100 px-3 py-1 rounded text-blue-700 mx-1">
-          {{ productStore.count }}
-        </span>
-        <span>product(s)</span>
-      </p>
+  <NuxtLayout>
+    <div class="overflow-hidden bg-gray-50 py-16 lg:py-24">
+      <div class="relative mx-auto max-w-xl px-6 lg:max-w-7xl lg:px-8">
+        <div>
+          <AppTitle>
+            Nuxity
+          </AppTitle>
+          <p class="mx-auto mt-4 max-w-3xl text-center text-xl text-gray-600">
+            A Nuxt 3 Minimal Starter template packed with a few features.
+          </p>
+        </div>
+
+        <!-- image card  -->
+        <div class="my-6">
+          <NuxtImg
+            class="shadow-2xl aspect-square w-52 mx-auto rounded-2xl flex-none object-cover rotate-6"
+            provider="imgix"
+            loading="lazy"
+            width="490"
+            height="500"
+            src="photo-1616628188506-4ad99d65640e"
+            preset="main"
+            sizes="sm:50vw md:50vw lg:30vw"
+          />
+        </div>
+        <!-- image end -->
+
+        <dl class="mt-10 space-y-4 sm:grid sm:grid-cols-2 sm:space-y-0 max-w-3xl mx-auto">
+          <div
+            v-for="(item, index) in features"
+            :key="`features-${index}`"
+          >
+            <dt>
+              <div class="absolute flex h-3 w-3 items-center justify-center rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 text-white" />
+              <p class="ml-16 text-lg font-medium leading-6 text-gray-900">
+                {{ item }}
+              </p>
+            </dt>
+          </div>
+        </dl>
+      </div>
     </div>
-  </div>
+  </NuxtLayout>
 </template>

pages/play.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { IProductItem } from '@/types'
+
+const quickView = ref(true)
+
+const productStore = useProductStore()
+const { products, cartList } = productStore
+
+const toggleQuickAccess = () => (quickView.value = !quickView.value)
+
+const onAddToCart = (product: IProductItem) => {
+  productStore.addToCart(product)
+}
+
+</script>
+<template>
+  <NuxtLayout>
+    <div class="overflow-hidden bg-gray-50 py-16 lg:py-24">
+      <div class="relative mx-auto max-w-xl px-6 lg:max-w-7xl lg:px-8 space-y-4">
+        <AppTitle>Play with Nuxity</AppTitle>
+        <p class="mx-auto mt-4 max-w-3xl text-center text-xl text-gray-600">
+          Add an item to see how it works
+        </p>
+        <div class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+          <ProductCard :products="products">
+            <template #default="{item: product}">
+              <button role="button" class="px-2 py-2 bg-zinc-200 text-gray-700 font-medium rounded-md w-full" @click="onAddToCart(product)">
+                Add to Cart
+              </button>
+            </template>
+          </ProductCard>
+        </div>
+      </div>
+      <div v-if="productStore.isEmptyCart" class="relative">
+        <div class="fixed bottom-20 right-4">
+          <QuickAccess :show-quick-access="quickView" @update:quickaccess="toggleQuickAccess">
+            <template #default>
+              <span class="font-medium">{{ productStore.cartList.length }} items</span>
+            </template>
+            <template #items>
+              <div>
+                <div v-for="{id, imageSrc, name }, idx in cartList" :key="id">
+                  <div class="flex border-slate-900/10 py-2" :class="idx !== 0 ?'border-t': ''">
+                    <NuxtImg class="h-16 w-1/4 rounded-lg" provider="imgix" loading="lazy" :src="imageSrc" />
+                    <span class="w-3/4 ml-3">{{ name }}</span>
+                  </div>
+                </div>
+                <span class="px-3 py-2 rounded bg-slate-100 font-medium inline-flex w-full">
+                  Total Price : {{ productStore.totalPrice }}
+                </span>
+              </div>
+            </template>
+          </QuickAccess>
+        </div>
+      </div>
+    </div>
+  </NuxtLayout>
+</template>