First Commit

nehemiagueldi · Jul 4, 2023 · d27cff3 · d27cff3
commit d27cff3
Show file tree

Hide file tree

Showing 59 changed files with 15,181 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# Nuxt dev/build outputs
+.output
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
diff --git a/README.md b/README.md
@@ -0,0 +1,63 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/app.vue b/app.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <NuxtLayout>
+      <NuxtLoadingIndicator :throttle="0" :duration="2000" :height="3" />
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>
diff --git a/components/Footer.vue b/components/Footer.vue
@@ -0,0 +1,34 @@
+<script setup>
+const currentYear = ref(new Date().getFullYear());
+</script>
+
+<template>
+  <div>
+    <footer class="footer footer-center p-10 bg-base-200 text-base-content rounded pb-24 lg:pb-12">
+      <!-- COPYRIGHT -->
+      <div>
+        <svg width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" class="inline-block fill-current">
+          <path
+            d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>
+        </svg>
+        <p class="font-bold">
+          NG STORE CORP. <br />Made with ❤️ by <NuxtLink class="link link-hover" to="https://nehemiagueldi.github.io" target="_blank">Nehemia Gueldi</NuxtLink> use <NuxtLink class="link link-hover text-accent" to="https://nuxt.com" target="_blank">Nuxt 3</NuxtLink>, <NuxtLink class="link link-hover text-info" to="https://tailwindcss.com" target="_blank">Tailwind CSS</NuxtLink> &
+          <NuxtLink class="link link-hover text-secondary" to="https://daisyui.com" target="_blank">DaisyUI</NuxtLink>
+        </p>
+        <p>Copyright © {{ currentYear }} - All right reserved</p>
+      </div>
+      <!-- SOCIAL LINKS -->
+      <div>
+        <div class="grid grid-flow-col gap-4">
+          <NuxtLink class="cursor-pointer hover:scale-110 transition duration-300" to="https://github.com/nehemiagueldi" target="_blank"
+            ><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 48 48" class="fill-current">
+              <path
+                d="M 24 4 C 19.963209 4 16.192498 5.2011807 13.046875 7.2636719 A 1.50015 1.50015 0 1 0 14.691406 9.7714844 C 17.365783 8.0179755 20.556791 7 24 7 C 33.406292 7 41 14.593708 41 24 C 41 26.707746 40.36968 29.257322 39.248047 31.525391 A 1.5001887 1.5001887 0 0 0 41.9375 32.855469 C 43.257867 30.185538 44 27.174254 44 24 C 44 12.972292 35.027708 4 24 4 z M 15.800781 13.076172 C 14.472781 15.202172 15.273563 17.527813 15.726562 18.507812 C 14.637562 19.788813 14 21.334 14 23 C 14 26.78 17.280547 29.939391 21.685547 30.775391 C 20.376547 31.448391 19.399609 32.67225 19.099609 34.15625 L 17.783203 34.15625 C 16.486203 34.15625 15.98225 33.629234 15.28125 32.740234 C 14.58925 31.851234 13.845172 31.253859 12.951172 31.005859 C 12.469172 30.954859 12.144453 31.321484 12.564453 31.646484 C 13.983453 32.612484 14.081391 34.193516 14.650391 35.228516 C 15.168391 36.160516 16.229687 37 17.429688 37 L 19 37 L 19 40.251953 C 12.043156 38.12245 7 31.665102 7 24 C 7 21.314402 7.6195896 18.783427 8.7246094 16.529297 A 1.50015 1.50015 0 0 0 7.4492188 14.351562 A 1.50015 1.50015 0 0 0 6.03125 15.208984 C 4.7302698 17.862854 4 20.851598 4 24 C 4 35.027708 12.972292 44 24 44 C 28.472909 44 32.618147 42.525863 35.951172 40.039062 A 1.5009817 1.5009817 0 1 0 34.15625 37.632812 C 32.617628 38.780793 30.876119 39.662932 29 40.240234 L 29 35.136719 C 29 33.228719 27.902453 31.591391 26.314453 30.775391 C 30.719453 29.939391 34 26.78 34 23 C 34 21.426 33.423406 19.961609 32.441406 18.724609 C 32.883406 17.356609 33.371219 14.953172 32.199219 13.076172 C 29.948219 13.076172 28.469672 14.622797 27.763672 15.591797 C 26.601672 15.213797 25.333 15 24 15 C 22.667 15 21.398328 15.213797 20.236328 15.591797 C 19.530328 14.622797 18.052781 13.076172 15.800781 13.076172 z"></path></svg></NuxtLink>
+          <NuxtLink class="cursor-pointer hover:scale-110 transition duration-300" to="https://www.linkedin.com/in/nehemiagueldi" target="_blank"
+            ><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" class="fill-current" viewBox="0 0 50 50">
+              <path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z"></path></svg></NuxtLink>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
diff --git a/components/Header.vue b/components/Header.vue
@@ -0,0 +1,62 @@
+<script setup>
+const colorMode = useColorMode();
+const themes = ["system", "light", "dark", "cupcake", "bumblebee", "emerald", "corporate", "synthwave", "retro", "cyberpunk", "valentine", "halloween", "garden", "forest", "aqua", "lofi", "pastel", "fantasy", "wireframe", "black", "luxury", "dracula", "cmyk", "autumn", "business", "acid", "lemonade", "night", "coffee", "winter"];
+
+const route = useRoute();
+const router = useRouter();
+
+function navigateTo(path) {
+  router.push(path);
+}
+</script>
+
+<template>
+  <div>
+    <div>
+      <!-- NAVBAR -->
+      <div class="navbar bg-base-100 fixed z-10">
+        <!-- BOTTOM NAVBAR -->
+        <div class="navbar-start">
+          <div class="dropdown">
+            <!-- BOTTOM NAVIGATION -->
+            <div class="btm-nav lg:hidden">
+              <button :class="{ active: route.path === '/home' }" @click="navigateTo('/home')">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
+                  <path d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z" />
+                  <path d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z" />
+                </svg>
+              </button>
+              <button :class="{ active: route.path === '/store' }" @click="navigateTo('/store')">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
+                  <path d="M5.223 2.25c-.497 0-.974.198-1.325.55l-1.3 1.298A3.75 3.75 0 007.5 9.75c.627.47 1.406.75 2.25.75.844 0 1.624-.28 2.25-.75.626.47 1.406.75 2.25.75.844 0 1.623-.28 2.25-.75a3.75 3.75 0 004.902-5.652l-1.3-1.299a1.875 1.875 0 00-1.325-.549H5.223z" />
+                  <path fill-rule="evenodd" d="M3 20.25v-8.755c1.42.674 3.08.673 4.5 0A5.234 5.234 0 009.75 12c.804 0 1.568-.182 2.25-.506a5.234 5.234 0 002.25.506c.804 0 1.567-.182 2.25-.506 1.42.674 3.08.675 4.5.001v8.755h.75a.75.75 0 010 1.5H2.25a.75.75 0 010-1.5H3zm3-6a.75.75 0 01.75-.75h3a.75.75 0 01.75.75v3a.75.75 0 01-.75.75h-3a.75.75 0 01-.75-.75v-3zm8.25-.75a.75.75 0 00-.75.75v5.25c0 .414.336.75.75.75h3a.75.75 0 00.75-.75v-5.25a.75.75 0 00-.75-.75h-3z" clip-rule="evenodd" />
+                </svg>
+              </button>
+              <button :class="{ active: route.path === '/about' }" @click="navigateTo('/about')">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
+                  <path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <NuxtLink class="btn btn-ghost normal-case text-xl md:text-3xl font-bold" to="/">NG STORE</NuxtLink>
+        </div>
+        <!-- NORMAL NAVIGATION -->
+        <div class="navbar-center hidden lg:flex">
+          <ul class="menu menu-horizontal px-1 space-x-4">
+            <li><NuxtLink to="/home" class="btn btn-ghost normal-case text-lg">Home</NuxtLink></li>
+            <li><NuxtLink to="/store" class="btn btn-ghost normal-case text-lg">Store</NuxtLink></li>
+            <li><NuxtLink to="/about" class="btn btn-ghost normal-case text-lg">About</NuxtLink></li>
+          </ul>
+        </div>
+        <!-- THEME -->
+        <div class="navbar-end">
+          <select class="select select-bordered w-full max-w-xs btn" v-model="colorMode.preference">
+            <option disabled selected>Theme</option>
+            <option v-for="theme of themes" :key="theme">{{ theme }}</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/layouts/custom.vue b/layouts/custom.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <!-- Main Content -->
+    <slot/>
+  </div>
+</template>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <!-- Header -->
+    <Header/>
+    <!-- Main Content -->
+    <slot/>
+    <!-- Footer -->
+    <Footer/>
+  </div>
+</template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -0,0 +1,22 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: false },
+  app: {
+    head:{
+      title: 'NG Store',
+      meta:[
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width, viewport-fit=cover, initial-scale=1' },
+        { hid: 'description', name: 'description', content: 'Learn NuxtJS' },
+      ]
+    }
+  },
+  modules: [
+    '@nuxtjs/tailwindcss', '@nuxtjs/color-mode'
+  ],
+  colorMode: {
+    preference: 'system', // default theme
+    dataValue: 'theme', // activate data-theme in <html> tag
+    classSuffix: '',
+  },
+})