feat: Creates component to show contact search results (#6571)

* feat: Creates component to show contact search results

* Refactors unused code

* Review fixes

* Update app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue

@@ -0,0 +1,83 @@
+<template>
+  <router-link :to="navigateTo" class="contact-item">
+    <woot-thumbnail :src="thumbnail" :username="name" size="24px" />
+    <div class="contact-details">
+      <h5 class="text-block-title name">{{ name }}</h5>
+      <p class="details-meta">
+        <span v-if="email" class="email">{{ email }}</span>
+        <span v-if="phone" class="separator">•</span>
+        <span v-if="phone" class="phone">
+          {{ phone }}
+        </span>
+      </p>
+    </div>
+  </router-link>
+</template>
+
+<script>
+import { frontendURL } from 'dashboard/helper/URLHelper';
+export default {
+  props: {
+    id: {
+      type: String,
+      default: '',
+    },
+    email: {
+      type: String,
+      default: '',
+    },
+    phone: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    thumbnail: {
+      type: String,
+      default: '',
+    },
+    accountId: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    navigateTo() {
+      return frontendURL(`accounts/${this.accountId}/contacts/${this.id}`);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.contact-item {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: var(--space-small);
+  border-radius: var(--border-radius-small);
+
+  &:hover {
+    background-color: var(--s-25);
+  }
+}
+.contact-details {
+  margin-left: var(--space-normal);
+}
+.name {
+  margin: 0;
+}
+.details-meta {
+  margin: 0;
+  color: var(--s-600);
+  font-size: var(--font-size-small);
+  display: flex;
+  align-items: center;
+
+  span {
+    margin-right: var(--space-smaller);
+  }
+}
+</style>

app/javascript/dashboard/modules/search/stories/SearchResultContactItem.stories.js

@@ -0,0 +1,53 @@
+import SearchResultContactItem from '../components/SearchResultContactItem.vue';
+
+export default {
+  title: 'Components/Search/SearchResultContactItem',
+  component: SearchResultContactItem,
+  argTypes: {
+    id: {
+      defaultValue: '123',
+      control: {
+        type: 'text',
+      },
+    },
+    name: {
+      defaultValue: 'John Doe',
+      control: {
+        type: 'text',
+      },
+    },
+    email: {
+      defaultValue: 'johndoe@faster.com',
+      control: {
+        type: 'text',
+      },
+    },
+    phone: {
+      defaultValue: '+1 123 456 7890',
+      control: {
+        type: 'text',
+      },
+    },
+    accountId: {
+      defaultValue: '7890',
+      control: {
+        type: 'text',
+      },
+    },
+    thumbnail: {
+      defaultValue: 'https://randomuser.me/api/portraits/men/62.jpg',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { SearchResultContactItem },
+  template:
+    '<search-result-contact-item v-bind="$props"></search-result-contact-item>',
+});
+
+export const ResultContactItem = Template.bind({});