diff --git a/README.md b/README.md
index 1acd5e8..2fbf670 100644
--- 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
new file mode 100644
index 0000000..5e86628
Binary files /dev/null and b/public/screen3.webp differ
diff --git a/src/components/AppAddUrl/AppAddUrl.vue b/src/components/AppAddUrl/AppAddUrl.vue
index 9318aba..3de6c37 100644
--- a/src/components/AppAddUrl/AppAddUrl.vue
+++ b/src/components/AppAddUrl/AppAddUrl.vue
@@ -52,6 +52,7 @@ const { loading: loadingMutation, mutate: addSample } = useMutation(ADD_SAMPLE,
>
-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
+ }
+})
-
+
{{ formattedLink }}
diff --git a/src/components/Icons/DeviconFigma.vue b/src/components/Icons/DeviconFigma.vue
new file mode 100644
index 0000000..a6c7902
--- /dev/null
+++ b/src/components/Icons/DeviconFigma.vue
@@ -0,0 +1,21 @@
+
+
+
diff --git a/src/components/Icons/MdiBehance.vue b/src/components/Icons/MdiBehance.vue
new file mode 100644
index 0000000..f5a299d
--- /dev/null
+++ b/src/components/Icons/MdiBehance.vue
@@ -0,0 +1,8 @@
+
+
+
diff --git a/src/components/Icons/MdiLinkVariant.vue b/src/components/Icons/MdiLinkVariant.vue
new file mode 100644
index 0000000..5e8499e
--- /dev/null
+++ b/src/components/Icons/MdiLinkVariant.vue
@@ -0,0 +1,8 @@
+
+
+
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 5583396..a8ed884 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -15,7 +15,7 @@ const selectedStatement: Ref = 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) {