Merge pull request #2 from macromanhq/dev

Production Version Merging from Dev
macromanhq · May 10, 2024 · 38675b4 · 38675b4
2 parents 3da0fdc + 2d0e766
commit 38675b4
Show file tree

Hide file tree

Showing 15 changed files with 1,487 additions and 61 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,17 +8,23 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@headlessui/vue": "^1.7.22",
+    "@heroicons/vue": "^2.1.3",
     "core-js": "^3.8.3",
     "vue": "^3.2.13"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "@tailwindcss/forms": "^0.5.7",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "autoprefixer": "^10.4.19",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^8.0.3",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3"
   },
   "eslintConfig": {
     "root": true,

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/github-2.svg b/public/github-2.svg
diff --git a/public/github.svg b/public/github.svg
diff --git a/public/index.html b/public/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="" class="h-full bg-gray-100">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
-  <body>
+  <body class="h-full">
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,19 +1,26 @@
 <template>
   <div id="app">
+    <NavBar />
     <EmojiSearch @search="handleSearch" />
+
     <SearchResults :emojis="filteredEmojis" />
+    <FooterBar />
   </div>
 </template>
 
 <script>
 import EmojiSearch from './components/EmojiSearch.vue';
 import SearchResults from './components/SearchResults.vue';
+import NavBar from './components/NavBar.vue';
+import FooterBar from './components/FooterBar.vue';
 
 export default {
   name: 'App',
   components: {
     EmojiSearch,
-    SearchResults
+    SearchResults,
+    NavBar,
+    FooterBar,
   },
   data() {
     return {
@@ -28,16 +35,16 @@ export default {
           emoji.name.toLowerCase().includes(query.toLowerCase())
         );
       } else {
-        this.filteredEmojis = this.emojis.slice(0, 10); // Reset to default view
+        this.filteredEmojis = this.emojis.slice(0, 50); // Reset to default view
       }
     }
   },
   created() {
-    fetch('./emojis.json') // Assuming emojis.json is in the assets directory
+    fetch('./emojis.json') 
       .then(response => response.json())
       .then(data => {
         this.emojis = data;
-        this.filteredEmojis = data.slice(0, 10); // Load default emojis on creation
+        this.filteredEmojis = data.slice(0, 50); 
       });
   }
 }

diff --git a/src/assets/style.css b/src/assets/style.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/components/EmojiSearch.vue b/src/components/EmojiSearch.vue
@@ -1,8 +1,10 @@
 <template>
-    <div>
-      <input type="text" @input="onInput" placeholder="Type to search emojis...">
+  <header class="bg-white shadow">
+    <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+      <input type="text" @input="onInput" placeholder="Type to search emojis..." class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
     </div>
-  </template>
+  </header>
+</template>
 
   <script>
   export default {

diff --git a/src/components/FooterBar.vue b/src/components/FooterBar.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="bg-white py-8 sm:py-8">
+        <div class="mx-auto max-w-7xl px-6 lg:px-8">
+            <div class="mx-auto max-w-2xl lg:text-center">
+                <h2 class="text-base font-semibold leading-7 text-indigo-600">Emoji Search</h2>
+                <p class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">A simple yet super useful
+                    emoji search.</p>
+                <p class="mt-6 text-lg leading-8 text-gray-600">Search the emoji you want, click to copy to your
+                    clipboard.<br>Its that simple</p>
+            </div>
+        </div>
+    </div>
+    <nav class="bg-white">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <div class="flex h-16 items-center justify-center">
+                <div class="flex items-center">
+                    <div class="md:block">
+                        <div class="ml-10 flex items-baseline space-x-4">
+                            Built with ❤ by <a href="https://macromanhq.com" target="_blank" class="p-1 text-gray-800">
+                                Macroman Solution </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+</template>
+
+<script>
+export default {
+    name: 'FooterBar',
+}
+</script>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -0,0 +1,30 @@
+<template>
+  <nav class="bg-gray-700">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div class="flex h-16 items-center justify-between">
+
+        <div class="flex text-white">
+          Emoji Search
+        </div>
+        <div class="flex items-center">
+          <div class="md:block">
+            <div class="ml-10 flex items-baseline space-x-4">
+              <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+              <a href="#" class="text-white rounded-md px-3 py-2 text-sm font-medium"
+                aria-current="page">
+                <img src="/github.svg" class="inline w-6 h-6 text-white" alt="">
+              </a>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'NavBar',
+}
+</script>
diff --git a/src/components/NotificationComponent.vue b/src/components/NotificationComponent.vue
@@ -0,0 +1,51 @@
+<template>
+    <transition name="fade">
+      <div v-if="isVisible" class="fixed bottom-5 right-5 bg-gray-800 text-white px-4 py-2 rounded shadow-lg" @click="hide">
+         {{ emoji }} {{ message }}
+      </div>
+    </transition>
+  </template>
+
+  <script>
+  export default {
+    name: 'NotificationComponent',
+    props: {
+      message: String,
+      emoji: String,
+      timeout: Number
+    },
+    data() {
+      return {
+        isVisible: false
+      };
+    },
+    methods: {
+      show() {
+        this.isVisible = true;
+        setTimeout(() => {
+          this.isVisible = false;
+        }, this.timeout || 2000); // Default to 2 seconds if no timeout is provided
+      },
+      hide() {
+        this.isVisible = false;
+      }
+    },
+    watch: {
+      emoji(newVal, oldVal) {
+        if (newVal !== oldVal) {
+          this.show();
+        }
+      }
+    }
+  }
+  </script>
+
+  <style scoped>
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity 0.5s;
+  }
+  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+    opacity: 0;
+  }
+  </style>
+
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
@@ -1,31 +1,49 @@
 <template>
-    <div>
-      <ul>
-        <li v-for="emoji in emojis" :key="emoji.index" @click="copyToClipboard(emoji.emoji)">
-          {{ emoji.emoji }} - {{ emoji.name }}
-        </li>
-      </ul>
+  <main>
+    <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
+      <div class="results mt-3">
+        <div class="flex justify-normal flex-wrap">
+          <div class="cursor-pointer hover:bg-gray-700 p-2 rounded text-xl antialiased" v-for="emoji in emojis"
+            :key="emoji.index" @click="copyToClipboard(emoji.emoji)">
+            {{ emoji.emoji }}
+          </div>
+          <NotificationComponent ref="notification" message="Emoji has been copied to clipboard!" :emoji="lastCopiedEmoji" />
+
+        </div>
+      </div>
     </div>
-  </template>
-
-  <script>
-  export default {
-    props: {
-      emojis: Array
-    },
-    methods: {
-      copyToClipboard(emoji) {
-        if (navigator.clipboard) {
-            navigator.clipboard.writeText(emoji).then(() => {
-                alert('Emoji copied to clipboard!');
-            }).catch(err => {
-                console.error('Failed to copy:', err);
-            });
-        } else {
-            console.log('Clipboard API not available');
-        }
+  </main>
+</template>
+
+<script>
+import NotificationComponent from './NotificationComponent.vue';
+
+export default {
+  components: {
+    NotificationComponent
+  },
+  props: {
+    emojis: Array
+  },
+  data() {
+    return {
+      lastCopiedEmoji: ''
+    };
+  },
+  methods: {
+    copyToClipboard(emoji) { 
+      if(navigator.clipboard){
+        navigator.clipboard.writeText(emoji).then(() => {
+        this.lastCopiedEmoji = emoji; 
+      }, (err) => {
+        console.error('Failed to copy:', err);
+      });
+
+      } else {
+        alert('You may have javascript disabled or on localhost');
       }
+      
     }
   }
-  </script>
-  
+}
+</script>
diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import './assets/style.css';
+
 
 createApp(App).mount('#app')
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/forms'), // Add this line if you need form utilities
+  ],
+}
+