🧹 chore(applink.vue): use proper icon for link type (closes #25)

- map icon to link domain closes #25
MartinsOnuoha · Nov 4, 2023 · 1c13b9b · 1c13b9b
1 parent 22ea985
commit 1c13b9b
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -9,6 +9,7 @@ Well [Fake Clients](https://fakeclients.com/) isn't completely Free and is limit
 
 ![what-should-i-design-banner-image](https://whatshouldidesign.space/screen1.webp)
 ![what-should-i-design-banner-image](https://whatshouldidesign.space/screen2.webp)
+![what-should-i-design-banner-image](https://whatshouldidesign.space/screen3.webp)
 
 ## Features
 - Community Source UI/UX Design problem Statements

diff --git a/public/screen3.webp b/public/screen3.webp
diff --git a/src/components/AppAddUrl/AppAddUrl.vue b/src/components/AppAddUrl/AppAddUrl.vue
@@ -52,6 +52,7 @@ const { loading: loadingMutation, mutate: addSample } = useMutation(ADD_SAMPLE,
     >
       <input
         required
+        autocomplete="off"
         name="add-url"
         v-model="inputValue"
         placeholder="e.g https://dribbble.com/shots..."

diff --git a/src/components/AppCommunity/AppLink.vue b/src/components/AppCommunity/AppLink.vue
@@ -1,16 +1,33 @@
 <script lang="ts" setup>
-import MdiDribbble from '@/components/Icons/MdiDribbble.vue'
 import { computed, type PropType } from 'vue'
+import MdiDribbble from '@/components/Icons/MdiDribbble.vue'
+import MdiBehance from '@/components/Icons/MdiBehance.vue'
+import DeviconFigma from '@/components/Icons/DeviconFigma.vue'
+import MdiLinkVariant from '@/components/Icons/MdiLinkVariant.vue'
 
 const props = defineProps({
   link: { type: Object as PropType<{ url: string }>, required: true }
 })
-const formattedLink = computed(() => props.link.url.replace('https://', ''))
+
+const formattedLink = computed(() => props.link.url.toLowerCase().replace('https://', ''))
+
+const icon = computed(() => {
+  switch (true) {
+    case formattedLink.value.includes('dribble'):
+      return MdiDribbble
+    case formattedLink.value.includes('behance'):
+      return MdiBehance
+    case formattedLink.value.includes('figma'):
+      return DeviconFigma
+    default:
+      return MdiLinkVariant
+  }
+})
 </script>
 
 <template>
   <a :href="link.url" target="_blank" :title="link.url" class="AppLink">
-    <component class="AppLink__icon" :is="MdiDribbble" />
+    <component class="AppLink__icon" :is="icon" />
     <div class="AppLink__url">
       {{ formattedLink }}
     </div>

diff --git a/src/components/Icons/DeviconFigma.vue b/src/components/Icons/DeviconFigma.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 128 128">
+    <path
+      fill="#0acf83"
+      d="M45.5 129c11.9 0 21.5-9.6 21.5-21.5V86H45.5C33.6 86 24 95.6 24 107.5S33.6 129 45.5 129zm0 0"
+    ></path>
+    <path
+      fill="#a259ff"
+      d="M24 64.5C24 52.6 33.6 43 45.5 43H67v43H45.5C33.6 86 24 76.4 24 64.5zm0 0"
+    ></path>
+    <path
+      fill="#f24e1e"
+      d="M24 21.5C24 9.6 33.6 0 45.5 0H67v43H45.5C33.6 43 24 33.4 24 21.5zm0 0"
+    ></path>
+    <path fill="#ff7262" d="M67 0h21.5C100.4 0 110 9.6 110 21.5S100.4 43 88.5 43H67zm0 0"></path>
+    <path
+      fill="#1abcfe"
+      d="M110 64.5c0 11.9-9.6 21.5-21.5 21.5S67 76.4 67 64.5S76.6 43 88.5 43S110 52.6 110 64.5zm0 0"
+    ></path>
+  </svg>
+</template>
diff --git a/src/components/Icons/MdiBehance.vue b/src/components/Icons/MdiBehance.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
+    <path
+      d="M19.58 12.27c-.04-.62-.25-1.09-.62-1.41c-.37-.32-.83-.48-1.38-.48c-.58 0-1.08.17-1.39.51c-.33.34-.54.8-.62 1.38m6.35-.23c.08.41.08 1 .08 1.77h-6.5c.05.9.35 1.52.94 1.88c.35.23.78.34 1.29.34c.53 0 .96-.14 1.27-.41c.2-.15.36-.35.5-.62h2.38c-.06.54-.35 1.07-.88 1.62c-.78.88-1.9 1.3-3.34 1.3c-1.19 0-2.23-.37-3.16-1.1c-.88-.73-1.34-1.92-1.34-3.57c0-1.55.41-2.75 1.23-3.55c.82-.83 1.88-1.24 3.19-1.24c.77 0 1.47.14 2.09.42c.62.28 1.14.71 1.54 1.32c.37.53.6 1.14.71 1.84M9.58 14.07c0-.65-.27-1.1-.79-1.34c-.29-.13-.71-.2-1.25-.23H4.87v3.34H7.5c.54 0 .96-.07 1.26-.22c.55-.27.82-.79.82-1.55m-4.71-3.61H7.5c.54 0 1-.1 1.32-.31c.34-.2.5-.57.5-1.09c0-.56-.22-.96-.66-1.15c-.39-.13-.88-.19-1.47-.19H4.87m6.85 4.7c.32.5.48 1.11.48 1.82c0 .76-.2 1.4-.55 1.99a3.6 3.6 0 0 1-.88.98c-.4.29-.87.51-1.41.62c-.54.11-1.12.17-1.75.17H2V5.55h6c1.53.03 2.6.45 3.23 1.33c.38.53.57 1.16.57 1.9c0 .76-.19 1.37-.57 1.83c-.23.26-.53.5-.95.71c.63.23 1.11.6 1.44 1.1m8.34-5.1h-5.01V6.07h5.01v1.25z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git a/src/components/Icons/MdiLinkVariant.vue b/src/components/Icons/MdiLinkVariant.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24a2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24a2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24a.973.973 0 0 1 0-1.42Z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -15,7 +15,7 @@ const selectedStatement: Ref<Statement | null> = ref(null)
 const filter = ref({})
 
 const { result, loading } = useQuery(GET_STATEMENTS, filter)
-const statements = computed(() => result?.value?.statements || [])
+const statements = computed(() => shuffle(result?.value?.statements || []))
 
 watch(statements, (statementsNewValue: Statement[]) => {
   if (selectedStatement.value) {