From a58b2b9052763e30cdc9f8f2d913e262cbf68d65 Mon Sep 17 00:00:00 2001
From: Kamrul H Shourov <shourov.kamrul@gmail.com>
Date: Thu, 31 Oct 2024 00:31:41 +0600
Subject: [PATCH] Integrate search-result-view into app with dummy data

---
 views/interactivity/src/App.tsx               | 57 ++++++++++++++--
 .../components/api/dictionary.validator.ts    |  6 +-
 .../src/components/general/Accordion.css      | 55 ++++++++++++++++
 .../src/components/general/Accordion.test.tsx | 17 +++++
 .../src/components/general/Accordion.tsx      | 22 +++++++
 .../components/general/AudioPlayer.test.tsx   | 20 ++++++
 .../src/components/general/AudioPlayer.tsx    | 25 +++++++
 .../src/components/general/Icon.css           |  4 ++
 .../src/components/general/Icon.tsx           | 15 +++++
 .../src/components/general/icons.svg          | 13 ++++
 .../src/components/icons.svg.tsx              | 17 -----
 .../search-result-view/SearchResultView.css   | 14 ++++
 .../SearchResultView.test.tsx                 | 53 +++++++++++++++
 .../search-result-view/SearchResultView.tsx   | 30 +++++++++
 .../header/SearchResultAccessSummary.css      |  4 --
 .../header/SearchResultAccessSummary.test.tsx |  2 +-
 .../header/SearchResultAccessSummary.tsx      | 15 +----
 .../header/SearchResultHeader.test.tsx        |  2 +-
 .../header/SearchResultHeader.tsx             |  4 +-
 .../search-result-view/ipa/IPAContainer.css   |  6 ++
 .../ipa/IPAContainer.test.tsx                 | 65 +++++++++++++++++++
 .../search-result-view/ipa/IPAContainer.tsx   | 27 ++++++++
 .../search-result-view/ipa/IPAView.css        | 18 +++++
 .../search-result-view/ipa/IPAView.test.tsx   | 17 +++++
 .../search-result-view/ipa/IPAView.tsx        | 18 +++++
 .../meaning/CategoryMeaningView.test.tsx      | 37 +++++++++++
 .../meaning/CategoryMeaningView.tsx           | 25 +++++++
 .../meaning/MeaningView.css                   | 12 ++++
 .../meaning/MeaningView.test.tsx              | 16 +++++
 .../meaning/MeaningView.tsx                   | 14 ++++
 views/interactivity/src/components/types.d.ts |  7 +-
 views/interactivity/src/index.css             | 48 +++++++++++---
 views/interactivity/src/lib/utils.test.ts     |  8 ++-
 views/interactivity/src/lib/utils.ts          |  5 +-
 34 files changed, 638 insertions(+), 60 deletions(-)
 create mode 100644 views/interactivity/src/components/general/Accordion.css
 create mode 100644 views/interactivity/src/components/general/Accordion.test.tsx
 create mode 100644 views/interactivity/src/components/general/Accordion.tsx
 create mode 100644 views/interactivity/src/components/general/AudioPlayer.test.tsx
 create mode 100644 views/interactivity/src/components/general/AudioPlayer.tsx
 create mode 100644 views/interactivity/src/components/general/Icon.css
 create mode 100644 views/interactivity/src/components/general/Icon.tsx
 create mode 100644 views/interactivity/src/components/general/icons.svg
 delete mode 100644 views/interactivity/src/components/icons.svg.tsx
 create mode 100644 views/interactivity/src/components/search-result-view/SearchResultView.css
 create mode 100644 views/interactivity/src/components/search-result-view/SearchResultView.test.tsx
 create mode 100644 views/interactivity/src/components/search-result-view/SearchResultView.tsx
 create mode 100644 views/interactivity/src/components/search-result-view/ipa/IPAContainer.css
 create mode 100644 views/interactivity/src/components/search-result-view/ipa/IPAContainer.test.tsx
 create mode 100644 views/interactivity/src/components/search-result-view/ipa/IPAContainer.tsx
 create mode 100644 views/interactivity/src/components/search-result-view/ipa/IPAView.css
 create mode 100644 views/interactivity/src/components/search-result-view/ipa/IPAView.test.tsx
 create mode 100644 views/interactivity/src/components/search-result-view/ipa/IPAView.tsx
 create mode 100644 views/interactivity/src/components/search-result-view/meaning/CategoryMeaningView.test.tsx
 create mode 100644 views/interactivity/src/components/search-result-view/meaning/CategoryMeaningView.tsx
 create mode 100644 views/interactivity/src/components/search-result-view/meaning/MeaningView.css
 create mode 100644 views/interactivity/src/components/search-result-view/meaning/MeaningView.test.tsx
 create mode 100644 views/interactivity/src/components/search-result-view/meaning/MeaningView.tsx

diff --git a/views/interactivity/src/App.tsx b/views/interactivity/src/App.tsx
index 5855c4b..bf08aca 100644
--- a/views/interactivity/src/App.tsx
+++ b/views/interactivity/src/App.tsx
@@ -2,12 +2,52 @@ import React, { useState, useEffect } from 'react';
 import './App.css';
 import { DictionaryApi } from './components/api/dictionary';
 import SearchBox from './components/search-box/SearchBox';
+import { SearchResultView } from './components/search-result-view/SearchResultView';
 import { DictionaryEntry } from './components/types';
 
 function App() {
-  const [bearerToken, setBearerToken] = useState<string | null>(null);
+  const [bearerToken, setBearerToken] = useState<string | null>('bearer-token');
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [response, setResponse] = useState<DictionaryEntry | null>(null);
+  const [response, setResponse] = useState<DictionaryEntry | null>({
+    dictionaryWord: {
+      name: 'hello',
+      entry: {
+        ipaListings: {
+          uk: [
+            {
+              category: '',
+              ipa: '/heˈləʊ/',
+              audio:
+                'https://dictionary.cambridge.org/media/english/uk_pron/u/ukh/ukhef/ukheft_029.mp3',
+            },
+          ],
+          us: [
+            {
+              category: '',
+              ipa: '/heˈloʊ/',
+              audio:
+                'https://dictionary.cambridge.org/media/english/us_pron/h/hel/hello/hello.mp3',
+            },
+          ],
+        },
+        meanings: [
+          {
+            categories: 'exclamation, noun',
+            entries: [
+              {
+                meaning: 'used when meeting or greeting someone:',
+                examples: ["Hello, Paul. I haven't seen you for ages."],
+              },
+            ],
+          },
+        ],
+      },
+    },
+    accessSummary: {
+      totalAccess: 1,
+      lastAccessAt: new Date('2024-01-01T00:00:00.000Z'),
+    },
+  });
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
@@ -24,11 +64,14 @@ function App() {
 
   const dictionaryApi = new DictionaryApi({ token: bearerToken });
   return (
-    <SearchBox
-      dictionaryApi={dictionaryApi}
-      onSuccess={setResponse}
-      onError={setErrorMessage}
-    />
+    <>
+      <SearchBox
+        dictionaryApi={dictionaryApi}
+        onSuccess={setResponse}
+        onError={setErrorMessage}
+      />
+      {response && <SearchResultView dictionaryEntry={response} />}
+    </>
   );
 }
 
diff --git a/views/interactivity/src/components/api/dictionary.validator.ts b/views/interactivity/src/components/api/dictionary.validator.ts
index fa0ec51..3b7cb7e 100644
--- a/views/interactivity/src/components/api/dictionary.validator.ts
+++ b/views/interactivity/src/components/api/dictionary.validator.ts
@@ -11,18 +11,18 @@ export const responseSchema = object({
   }).nullable(),
 });
 
-const ipaListingSchema = object({
+export const ipaListingSchema = object({
   category: string().nonNullable().defined(),
   ipa: string().required(),
   audio: string().url().required(),
 });
 
-const meaningEntrySchema = object({
+export const meaningEntrySchema = object({
   meaning: string().required(),
   examples: array().of(string()).required(),
 });
 
-const meaningSchema = object({
+export const meaningSchema = object({
   categories: string().required(),
   entries: array().of(meaningEntrySchema).required(),
 });
diff --git a/views/interactivity/src/components/general/Accordion.css b/views/interactivity/src/components/general/Accordion.css
new file mode 100644
index 0000000..955783a
--- /dev/null
+++ b/views/interactivity/src/components/general/Accordion.css
@@ -0,0 +1,55 @@
+.accordion > input[type='checkbox'] {
+  position: absolute;
+  left: -100vw;
+}
+.accordion .content {
+  overflow-y: hidden;
+  height: 0;
+  transition: height 0.3s ease;
+}
+.accordion > input[type='checkbox']:checked ~ .content {
+  height: auto;
+  overflow: visible;
+}
+.accordion label {
+  display: block;
+}
+.accordion {
+  margin-bottom: 1em;
+}
+.accordion > input[type='checkbox']:checked ~ .content {
+  padding: 1em;
+  border: 1px solid #e8e8e8;
+  border-top: 0;
+}
+.accordion .handle {
+  margin: 0;
+  font-size: 1.125em;
+  line-height: 1.2em;
+}
+.accordion label {
+  color: #333;
+  cursor: pointer;
+  font-weight: normal;
+  padding: 1em;
+  background: #e8e8e8;
+}
+.accordion label:hover,
+.accordion label:focus {
+  background: #d8d8d8;
+}
+.accordion .handle label:before {
+  font-family: 'fontawesome';
+  content: '\f054';
+  display: inline-block;
+  margin-right: 0.625em;
+  font-size: 0.58em;
+  line-height: 1.556em;
+  vertical-align: middle;
+}
+.accordion > input[type='checkbox']:checked ~ .handle label:before {
+  content: '\f078';
+}
+.accordion {
+  width: 100%;
+}
diff --git a/views/interactivity/src/components/general/Accordion.test.tsx b/views/interactivity/src/components/general/Accordion.test.tsx
new file mode 100644
index 0000000..642429e
--- /dev/null
+++ b/views/interactivity/src/components/general/Accordion.test.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Accordion } from './Accordion';
+
+test('accordion should have a label and content block', async () => {
+  const id = 'accordion-id';
+  const label = 'label';
+  const Children = () => <div>Hello</div>;
+  render(
+    <Accordion id={id} label={label}>
+      <Children />
+    </Accordion>,
+  );
+
+  expect(screen.queryByText(label)).toBeInTheDocument();
+  expect(screen.queryByText('Hello')).toBeInTheDocument();
+});
diff --git a/views/interactivity/src/components/general/Accordion.tsx b/views/interactivity/src/components/general/Accordion.tsx
new file mode 100644
index 0000000..0039b69
--- /dev/null
+++ b/views/interactivity/src/components/general/Accordion.tsx
@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+import './Accordion.css';
+
+export function Accordion({
+  id,
+  label,
+  children,
+}: {
+  id: string;
+  label: string;
+  children: ReactNode;
+}) {
+  return (
+    <section className="accordion">
+      <input id={id} type="checkbox" name={label} />
+      <h2 className="handle">
+        <label htmlFor={id}>{label}</label>
+      </h2>
+      <div className="content">{children}</div>
+    </section>
+  );
+}
diff --git a/views/interactivity/src/components/general/AudioPlayer.test.tsx b/views/interactivity/src/components/general/AudioPlayer.test.tsx
new file mode 100644
index 0000000..3fde939
--- /dev/null
+++ b/views/interactivity/src/components/general/AudioPlayer.test.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { AudioPlayer } from './AudioPlayer';
+
+test('audio player should play audio when button is clicked', async () => {
+  const id = 1;
+  const src = 'https://domain.com/media/1.mp3';
+
+  render(<AudioPlayer id={id} src={src} />);
+
+  const audioPlayer: HTMLAudioElement = screen.getByTestId(
+    `audio-player-${id}`,
+  );
+  jest.spyOn(audioPlayer, 'play').mockImplementation(() => Promise.resolve());
+
+  const button = screen.getByTestId(`audio-button-${id}`);
+  fireEvent.click(button);
+
+  expect(audioPlayer.play).toHaveBeenCalled();
+});
diff --git a/views/interactivity/src/components/general/AudioPlayer.tsx b/views/interactivity/src/components/general/AudioPlayer.tsx
new file mode 100644
index 0000000..f2b3f3c
--- /dev/null
+++ b/views/interactivity/src/components/general/AudioPlayer.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Icon } from './Icon';
+
+export function AudioPlayer({ id, src }: { id: number; src: string }) {
+  const audioRef = React.useRef<HTMLAudioElement | null>(null);
+
+  const handlePlay = () => {
+    if (audioRef.current) {
+      audioRef.current.play();
+    }
+  };
+
+  return (
+    <>
+      <div
+        data-testid={`audio-button-${id}`}
+        className="icon"
+        onClick={handlePlay}
+      >
+        <Icon iconType="audio" />
+      </div>
+      <audio data-testid={`audio-player-${id}`} ref={audioRef} src={src} />
+    </>
+  );
+}
diff --git a/views/interactivity/src/components/general/Icon.css b/views/interactivity/src/components/general/Icon.css
new file mode 100644
index 0000000..2a497ce
--- /dev/null
+++ b/views/interactivity/src/components/general/Icon.css
@@ -0,0 +1,4 @@
+.icon {
+  width: 1em;
+  height: 1em;
+}
diff --git a/views/interactivity/src/components/general/Icon.tsx b/views/interactivity/src/components/general/Icon.tsx
new file mode 100644
index 0000000..ab5da8b
--- /dev/null
+++ b/views/interactivity/src/components/general/Icon.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import IconsSvg from './icons.svg';
+import './Icon.css';
+
+export function Icon({
+  iconType,
+}: {
+  iconType: 'last-access-at' | 'total-access' | 'audio';
+}) {
+  return (
+    <svg className="icon">
+      <use href={`${IconsSvg}#icon-${iconType}`} />
+    </svg>
+  );
+}
diff --git a/views/interactivity/src/components/general/icons.svg b/views/interactivity/src/components/general/icons.svg
new file mode 100644
index 0000000..bea049d
--- /dev/null
+++ b/views/interactivity/src/components/general/icons.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <symbol id="icon-last-access-at" viewBox="0 0 448 512">
+      <path d="M96 32l0 32L48 64C21.5 64 0 85.5 0 112l0 48 448 0 0-48c0-26.5-21.5-48-48-48l-48 0 0-32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 32L160 64l0-32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192L0 192 0 464c0 26.5 21.5 48 48 48l352 0c26.5 0 48-21.5 48-48l0-272z"></path>
+    </symbol>
+    <symbol id="icon-total-access" viewBox="0 0 384 512">
+      <path d="M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-384c0-35.3-28.7-64-64-64L64 0zM96 64l192 0c17.7 0 32 14.3 32 32l0 32c0 17.7-14.3 32-32 32L96 160c-17.7 0-32-14.3-32-32l0-32c0-17.7 14.3-32 32-32zm32 160a32 32 0 1 1 -64 0 32 32 0 1 1 64 0zM96 352a32 32 0 1 1 0-64 32 32 0 1 1 0 64zM64 416c0-17.7 14.3-32 32-32l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-96 0c-17.7 0-32-14.3-32-32zM192 256a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm32 64a32 32 0 1 1 -64 0 32 32 0 1 1 64 0zm64-64a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm32 64a32 32 0 1 1 -64 0 32 32 0 1 1 64 0zM288 448a32 32 0 1 1 0-64 32 32 0 1 1 0 64z"></path>
+    </symbol>
+    <symbol id="icon-audio" viewBox="0 0 640 512">
+      <path d="M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64l0 384c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352 64 352c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l67.8 0L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z"></path>
+    </symbol>
+  </defs>
+</svg>
diff --git a/views/interactivity/src/components/icons.svg.tsx b/views/interactivity/src/components/icons.svg.tsx
deleted file mode 100644
index ffca150..0000000
--- a/views/interactivity/src/components/icons.svg.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-export function Icons() {
-  return (
-    <svg style={{ display: 'none' }}>
-      <symbol id="icon-last-access-at" viewBox="0 0 448 512">
-        <path d="M96 32l0 32L48 64C21.5 64 0 85.5 0 112l0 48 448 0 0-48c0-26.5-21.5-48-48-48l-48 0 0-32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 32L160 64l0-32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192L0 192 0 464c0 26.5 21.5 48 48 48l352 0c26.5 0 48-21.5 48-48l0-272z"></path>
-      </symbol>
-      <symbol id="icon-total-access" viewBox="0 0 384 512">
-        <path d="M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-384c0-35.3-28.7-64-64-64L64 0zM96 64l192 0c17.7 0 32 14.3 32 32l0 32c0 17.7-14.3 32-32 32L96 160c-17.7 0-32-14.3-32-32l0-32c0-17.7 14.3-32 32-32zm32 160a32 32 0 1 1 -64 0 32 32 0 1 1 64 0zM96 352a32 32 0 1 1 0-64 32 32 0 1 1 0 64zM64 416c0-17.7 14.3-32 32-32l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-96 0c-17.7 0-32-14.3-32-32zM192 256a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm32 64a32 32 0 1 1 -64 0 32 32 0 1 1 64 0zm64-64a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm32 64a32 32 0 1 1 -64 0 32 32 0 1 1 64 0zM288 448a32 32 0 1 1 0-64 32 32 0 1 1 0 64z"></path>
-      </symbol>
-      <symbol id="icon-audio" viewBox="0 0 640 512">
-        <path d="M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64l0 384c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352 64 352c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l67.8 0L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z"></path>
-      </symbol>
-    </svg>
-  );
-}
diff --git a/views/interactivity/src/components/search-result-view/SearchResultView.css b/views/interactivity/src/components/search-result-view/SearchResultView.css
new file mode 100644
index 0000000..d51c6b9
--- /dev/null
+++ b/views/interactivity/src/components/search-result-view/SearchResultView.css
@@ -0,0 +1,14 @@
+.card {
+  box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.2);
+  transition: 0.3s;
+  width: 100%;
+  padding: 0.5em;
+  margin-top: 0.25em;
+  /* width: 40%; */
+}
+.card:hover {
+  box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.2);
+}
+.divider {
+  padding: 0.5em 0;
+}
diff --git a/views/interactivity/src/components/search-result-view/SearchResultView.test.tsx b/views/interactivity/src/components/search-result-view/SearchResultView.test.tsx
new file mode 100644
index 0000000..2f55eee
--- /dev/null
+++ b/views/interactivity/src/components/search-result-view/SearchResultView.test.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SearchResultView } from './SearchResultView';
+
+test('it should display all the dictionary entry information', () => {
+  const dictionaryEntry = {
+    dictionaryWord: {
+      name: 'hello',
+      entry: {
+        ipaListings: {
+          uk: [
+            {
+              category: '',
+              ipa: '/heˈləʊ/',
+              audio:
+                'https://dictionary.cambridge.org/media/english/uk_pron/u/ukh/ukhef/ukheft_029.mp3',
+            },
+          ],
+          us: [
+            {
+              category: '',
+              ipa: '/heˈloʊ/',
+              audio:
+                'https://dictionary.cambridge.org/media/english/us_pron/h/hel/hello/hello.mp3',
+            },
+          ],
+        },
+        meanings: [
+          {
+            categories: 'exclamation, noun',
+            entries: [
+              {
+                meaning: 'used when meeting or greeting someone:',
+                examples: ["Hello, Paul. I haven't seen you for ages."],
+              },
+            ],
+          },
+        ],
+      },
+    },
+    accessSummary: {
+      totalAccess: 1,
+      lastAccessAt: new Date('2024-01-01T00:00:00.000Z'),
+    },
+  };
+
+  render(<SearchResultView dictionaryEntry={dictionaryEntry} />);
+
+  expect(screen.queryByTestId('header-container')).toBeInTheDocument();
+  expect(screen.getByTestId('divider')).toBeInTheDocument();
+  expect(screen.queryByTestId('ipa-container')).toBeInTheDocument();
+  expect(screen.getByText('Meanings')).toBeInTheDocument();
+});
diff --git a/views/interactivity/src/components/search-result-view/SearchResultView.tsx b/views/interactivity/src/components/search-result-view/SearchResultView.tsx
new file mode 100644
index 0000000..b0c4f16
--- /dev/null
+++ b/views/interactivity/src/components/search-result-view/SearchResultView.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { DictionaryEntry } from '../types';
+import { SearchResultHeader } from './header/SearchResultHeader';
+import { IPAContainer } from './ipa/IPAContainer';
+import { CategoryMeaningView } from './meaning/CategoryMeaningView';
+import './SearchResultView.css';
+
+export function SearchResultView({
+  dictionaryEntry,
+}: {
+  dictionaryEntry: DictionaryEntry;
+}) {
+  return (
+    <div className="card">
+      <SearchResultHeader
+        word={dictionaryEntry.dictionaryWord.name}
+        accessSummary={dictionaryEntry.accessSummary}
+      />
+      <div className="divider">
+        <hr data-testid="divider" />
+      </div>
+      <IPAContainer
+        ipaListings={dictionaryEntry.dictionaryWord.entry.ipaListings}
+      />
+      <CategoryMeaningView
+        categoryMeanings={dictionaryEntry.dictionaryWord.entry.meanings}
+      />
+    </div>
+  );
+}
diff --git a/views/interactivity/src/components/search-result-view/header/SearchResultAccessSummary.css b/views/interactivity/src/components/search-result-view/header/SearchResultAccessSummary.css
index 6e31095..d600c3e 100644
--- a/views/interactivity/src/components/search-result-view/header/SearchResultAccessSummary.css
+++ b/views/interactivity/src/components/search-result-view/header/SearchResultAccessSummary.css
@@ -12,10 +12,6 @@
   justify-content: center;
   gap: 0.5em;
 }
-.icon {
-  width: 1em;
-  height: 1em;
-}
 .access-info > .access-content {
   margin-top: 0.35em;
 }
diff --git a/views/interactivity/src/components/search-result-view/header/SearchResultAccessSummary.test.tsx b/views/interactivity/src/components/search-result-view/header/SearchResultAccessSummary.test.tsx
index 0f68283..de5aabe 100644
--- a/views/interactivity/src/components/search-result-view/header/SearchResultAccessSummary.test.tsx
+++ b/views/interactivity/src/components/search-result-view/header/SearchResultAccessSummary.test.tsx
@@ -4,7 +4,7 @@ import { SearchResultAccessSummary } from './SearchResultAccessSummary';
 
 test('access-summary block should show last access date and total access for searched word', async () => {
   const accessSummary = {
-    lastAccessAt: '2024-01-01T00:00:00.000Z',
+    lastAccessAt: new Date('2024-01-01T00:00:00.000Z'),
     totalAccess: 313,
   };
 
diff --git a/views/interactivity/src/components/search-result-view/header/SearchResultAccessSummary.tsx b/views/interactivity/src/components/search-result-view/header/SearchResultAccessSummary.tsx
index 89d27e9..5b073db 100644
--- a/views/interactivity/src/components/search-result-view/header/SearchResultAccessSummary.tsx
+++ b/views/interactivity/src/components/search-result-view/header/SearchResultAccessSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Utils } from '../../../lib/utils';
-import { Icons } from '../../icons.svg';
+import { Icon } from '../../general/Icon';
 import { AccessSummary } from '../../types';
 import './SearchResultAccessSummary.css';
 
@@ -12,20 +12,11 @@ export function SearchResultAccessSummary({
   return (
     <div className="access-info-container" data-testid="access-summary">
       <div className="access-info">
-        <Icons />
-        <div className="icon">
-          <svg>
-            <use id="#icon-last-access-at" />
-          </svg>
-        </div>
+        <Icon iconType="last-access-at" />
         <span className="access-content">
           {new Utils().iso8601ToDateTime(accessSummary.lastAccessAt)}
         </span>
-        <div className="icon">
-          <svg>
-            <use id="#icon-total-access" />
-          </svg>
-        </div>
+        <Icon iconType="total-access" />
         <span className="access-content">{accessSummary.totalAccess}</span>
       </div>
     </div>
diff --git a/views/interactivity/src/components/search-result-view/header/SearchResultHeader.test.tsx b/views/interactivity/src/components/search-result-view/header/SearchResultHeader.test.tsx
index ce1cf3a..bff3e97 100644
--- a/views/interactivity/src/components/search-result-view/header/SearchResultHeader.test.tsx
+++ b/views/interactivity/src/components/search-result-view/header/SearchResultHeader.test.tsx
@@ -6,7 +6,7 @@ test('header should have the searched word and access-summary section (when prov
   const searchedWord = 'hello';
   const accessSummary = {
     totalAccess: 3,
-    lastAccessAt: '2024-01-01T00:00:00.000Z',
+    lastAccessAt: new Date('2024-01-01T00:00:00.000Z'),
   };
 
   render(
diff --git a/views/interactivity/src/components/search-result-view/header/SearchResultHeader.tsx b/views/interactivity/src/components/search-result-view/header/SearchResultHeader.tsx
index 44a188c..5a4c208 100644
--- a/views/interactivity/src/components/search-result-view/header/SearchResultHeader.tsx
+++ b/views/interactivity/src/components/search-result-view/header/SearchResultHeader.tsx
@@ -8,11 +8,11 @@ export function SearchResultHeader({
   accessSummary,
 }: {
   word: string;
-  accessSummary: AccessSummary;
+  accessSummary: AccessSummary | null;
 }) {
   return (
     <div className="header-container" data-testid="header-container">
-      <div className="word">{word}</div>
+      <h1 className="word">{word}</h1>
       {accessSummary && (
         <SearchResultAccessSummary accessSummary={accessSummary} />
       )}
diff --git a/views/interactivity/src/components/search-result-view/ipa/IPAContainer.css b/views/interactivity/src/components/search-result-view/ipa/IPAContainer.css
new file mode 100644
index 0000000..90f035c
--- /dev/null
+++ b/views/interactivity/src/components/search-result-view/ipa/IPAContainer.css
@@ -0,0 +1,6 @@
+.region-block {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
diff --git a/views/interactivity/src/components/search-result-view/ipa/IPAContainer.test.tsx b/views/interactivity/src/components/search-result-view/ipa/IPAContainer.test.tsx
new file mode 100644
index 0000000..64c0fae
--- /dev/null
+++ b/views/interactivity/src/components/search-result-view/ipa/IPAContainer.test.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IPAContainer } from './IPAContainer';
+
+test('ipa container should view US and UK pronunciation block', async () => {
+  const ipaListings = {
+    uk: [
+      {
+        category: 'noun',
+        ipa: '/heˈləʊ/',
+        audio:
+          'https://dictionary.cambridge.org/media/english/uk_pron/u/ukh/ukhef/ukheft_029.mp3',
+      },
+    ],
+    us: [
+      {
+        category: 'noun',
+        ipa: '/heˈloʊ/',
+        audio:
+          'https://dictionary.cambridge.org/media/english/us_pron/h/hel/hello/hello.mp3',
+      },
+    ],
+  };
+  render(<IPAContainer ipaListings={ipaListings} />);
+
+  expect(screen.getByText('🇺🇸')).toBeInTheDocument();
+  expect(screen.getByText('🇬🇧')).toBeInTheDocument();
+  expect(screen.getAllByText('(noun)')).toHaveLength(2);
+});
+
+test('ipa container should only view US if UK pronunciation is not defined', async () => {
+  const ipaListings = {
+    us: [
+      {
+        category: 'noun',
+        ipa: '/heˈloʊ/',
+        audio:
+          'https://dictionary.cambridge.org/media/english/us_pron/h/hel/hello/hello.mp3',
+      },
+    ],
+  };
+  render(<IPAContainer ipaListings={ipaListings} />);
+
+  expect(screen.getByText('🇺🇸')).toBeInTheDocument();
+  expect(screen.queryByText('🇬🇧')).not.toBeInTheDocument();
+  expect(screen.getAllByText('(noun)')).toHaveLength(1);
+});
+
+test('ipa container should only view UK if US pronunciation is not defined', async () => {
+  const ipaListings = {
+    uk: [
+      {
+        category: 'noun',
+        ipa: '/heˈləʊ/',
+        audio:
+          'https://dictionary.cambridge.org/media/english/uk_pron/u/ukh/ukhef/ukheft_029.mp3',
+      },
+    ],
+  };
+  render(<IPAContainer ipaListings={ipaListings} />);
+
+  expect(screen.queryByText('🇺🇸')).not.toBeInTheDocument();
+  expect(screen.getByText('🇬🇧')).toBeInTheDocument();
+  expect(screen.getAllByText('(noun)')).toHaveLength(1);
+});
diff --git a/views/interactivity/src/components/search-result-view/ipa/IPAContainer.tsx b/views/interactivity/src/components/search-result-view/ipa/IPAContainer.tsx
new file mode 100644
index 0000000..08aae93
--- /dev/null
+++ b/views/interactivity/src/components/search-result-view/ipa/IPAContainer.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { IPAListings } from '../../types';
+import { IPAView } from './IPAView';
+import './IPAContainer.css';
+
+export function IPAContainer({ ipaListings }: { ipaListings: IPAListings }) {
+  return (
+    <div className="region-block" data-testid="ipa-container">
+      {!!ipaListings['us'] && (
+        <div className="pronunciation-container">
+          <span>🇺🇸</span>
+          {ipaListings['us'].map((ipa, id) => (
+            <IPAView id={id} ipa={ipa} />
+          ))}
+        </div>
+      )}
+      {!!ipaListings['uk'] && (
+        <div className="pronunciation-container">
+          <span>🇬🇧</span>
+          {ipaListings['uk'].map((ipa, id) => (
+            <IPAView id={id} ipa={ipa} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/views/interactivity/src/components/search-result-view/ipa/IPAView.css b/views/interactivity/src/components/search-result-view/ipa/IPAView.css
new file mode 100644
index 0000000..1a589dd
--- /dev/null
+++ b/views/interactivity/src/components/search-result-view/ipa/IPAView.css
@@ -0,0 +1,18 @@
+.pronunciation-block {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  padding-bottom: 0.25em;
+  gap: 0.5em;
+}
+.pronunciation-block:last-child {
+  padding-bottom: 1em;
+}
+.ipa {
+  font-weight: 600;
+}
+.ipa > sup {
+  margin-left: 0.125em;
+  font-weight: 200;
+}
diff --git a/views/interactivity/src/components/search-result-view/ipa/IPAView.test.tsx b/views/interactivity/src/components/search-result-view/ipa/IPAView.test.tsx
new file mode 100644
index 0000000..05b5ecd
--- /dev/null
+++ b/views/interactivity/src/components/search-result-view/ipa/IPAView.test.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IPAView } from './IPAView';
+
+test('ipa view should contain ipa and audio player', async () => {
+  const id = 1;
+  const ipa = {
+    category: 'noun',
+    ipa: '/ˈprez.ənt/',
+    audio: 'http://domain.com/media/1.mp3',
+  };
+  render(<IPAView id={id} ipa={ipa} />);
+
+  expect(screen.getByText(ipa.ipa)).toBeInTheDocument();
+  expect(screen.getByText(`(${ipa.category})`)).toBeInTheDocument();
+  expect(screen.queryByTestId(`audio-player-${id}`)).not.toBeNull();
+});
diff --git a/views/interactivity/src/components/search-result-view/ipa/IPAView.tsx b/views/interactivity/src/components/search-result-view/ipa/IPAView.tsx
new file mode 100644
index 0000000..852bd06
--- /dev/null
+++ b/views/interactivity/src/components/search-result-view/ipa/IPAView.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { RegionPronunciation } from '../../types';
+import { AudioPlayer } from '../../general/AudioPlayer';
+import './IPAView.css';
+
+export function IPAView({ id, ipa }: { id: number; ipa: RegionPronunciation }) {
+  return (
+    <>
+      <div className="pronunciation-block">
+        <span className="ipa">
+          {ipa.ipa}
+          {ipa.category && <sup>({ipa.category})</sup>}
+        </span>
+        <AudioPlayer id={id} src={ipa.audio} />
+      </div>
+    </>
+  );
+}
diff --git a/views/interactivity/src/components/search-result-view/meaning/CategoryMeaningView.test.tsx b/views/interactivity/src/components/search-result-view/meaning/CategoryMeaningView.test.tsx
new file mode 100644
index 0000000..2e38af8
--- /dev/null
+++ b/views/interactivity/src/components/search-result-view/meaning/CategoryMeaningView.test.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CategoryMeaningView } from './CategoryMeaningView';
+
+test('it should display "Meanings" collapsible header with parts-of-speech wise sub collapsible section', async () => {
+  const meanings = [
+    {
+      categories: 'noun',
+      entries: [
+        {
+          meaning: 'noun-meaning',
+          examples: ['noun-example'],
+        },
+      ],
+    },
+    {
+      categories: 'adjective',
+      entries: [
+        {
+          meaning: 'adjective-meaning',
+          examples: ['adjective-example'],
+        },
+      ],
+    },
+  ];
+
+  render(<CategoryMeaningView categoryMeanings={meanings} />);
+
+  expect(screen.getByText('Meanings')).toBeInTheDocument();
+  expect(screen.getByText('noun')).toBeInTheDocument();
+  expect(screen.getByText('noun-meaning')).toBeInTheDocument();
+  expect(screen.getByText('noun-example')).toBeInTheDocument();
+
+  expect(screen.getByText('adjective')).toBeInTheDocument();
+  expect(screen.getByText('adjective-meaning')).toBeInTheDocument();
+  expect(screen.getByText('adjective-example')).toBeInTheDocument();
+});
diff --git a/views/interactivity/src/components/search-result-view/meaning/CategoryMeaningView.tsx b/views/interactivity/src/components/search-result-view/meaning/CategoryMeaningView.tsx
new file mode 100644
index 0000000..7521631
--- /dev/null
+++ b/views/interactivity/src/components/search-result-view/meaning/CategoryMeaningView.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Accordion } from '../../general/Accordion';
+import { Meaning } from '../../types';
+import { MeaningView } from './MeaningView';
+
+export function CategoryMeaningView({
+  categoryMeanings,
+}: {
+  categoryMeanings: Meaning[];
+}) {
+  return (
+    <Accordion id="meaning-header" label="Meanings">
+      {categoryMeanings.map((categoryMeaning, id) => (
+        <Accordion
+          id={`category-header-${id}`}
+          label={categoryMeaning.categories}
+        >
+          {categoryMeaning.entries.map((meaning) => (
+            <MeaningView meaning={meaning} />
+          ))}
+        </Accordion>
+      ))}
+    </Accordion>
+  );
+}
diff --git a/views/interactivity/src/components/search-result-view/meaning/MeaningView.css b/views/interactivity/src/components/search-result-view/meaning/MeaningView.css
new file mode 100644
index 0000000..5a14ad6
--- /dev/null
+++ b/views/interactivity/src/components/search-result-view/meaning/MeaningView.css
@@ -0,0 +1,12 @@
+.meaning {
+  font-weight: 600;
+}
+ul {
+  list-style: none;
+}
+ul li:before {
+  content: '-  ';
+}
+.content ul:not(:first-of-type) {
+  margin-top: 1em;
+}
diff --git a/views/interactivity/src/components/search-result-view/meaning/MeaningView.test.tsx b/views/interactivity/src/components/search-result-view/meaning/MeaningView.test.tsx
new file mode 100644
index 0000000..b571512
--- /dev/null
+++ b/views/interactivity/src/components/search-result-view/meaning/MeaningView.test.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MeaningView } from './MeaningView';
+
+test('meaning block should display meaning and its corresponding examples', async () => {
+  const meaning = {
+    meaning: 'Meaning',
+    examples: ['Example 1', 'Example 2'],
+  };
+
+  render(<MeaningView meaning={meaning} />);
+
+  expect(screen.getByText(meaning.meaning)).toBeInTheDocument();
+  expect(screen.getByText(meaning.examples[0])).toBeInTheDocument();
+  expect(screen.getByText(meaning.examples[1])).toBeInTheDocument();
+});
diff --git a/views/interactivity/src/components/search-result-view/meaning/MeaningView.tsx b/views/interactivity/src/components/search-result-view/meaning/MeaningView.tsx
new file mode 100644
index 0000000..9376fc4
--- /dev/null
+++ b/views/interactivity/src/components/search-result-view/meaning/MeaningView.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { MeaningEntry } from '../../types';
+import './MeaningView.css';
+
+export function MeaningView({ meaning }: { meaning: MeaningEntry }) {
+  return (
+    <ul>
+      <strong className="meaning">{meaning.meaning}</strong>
+      {meaning.examples.map((example) => (
+        <li>{example}</li>
+      ))}
+    </ul>
+  );
+}
diff --git a/views/interactivity/src/components/types.d.ts b/views/interactivity/src/components/types.d.ts
index 217b3b5..9fbf26f 100644
--- a/views/interactivity/src/components/types.d.ts
+++ b/views/interactivity/src/components/types.d.ts
@@ -1,3 +1,4 @@
+import { InferType } from 'yup';
 import {
   lexicalEntrySchema,
   responseSchema,
@@ -7,12 +8,14 @@ import {
 } from './api/dictionary.validator';
 
 export type DictionaryWord = InferType<typeof lexicalEntrySchema>;
-export type AccessSummary = InferType<typeof responseSchema>['accessSummary'];
+export type AccessSummary = NonNullable<
+  InferType<typeof responseSchema>['accessSummary']
+>;
 export type DictionaryEntry = {
   dictionaryWord: DictionaryWord;
   accessSummary: AccessSummary;
 };
 export type RegionPronunciation = InferType<typeof ipaListingSchema>;
 export type IPAListings = DictionaryWord['entry']['ipaListings'];
-export type MeaningEnty = InferType<typeof meaningEntrySchema>;
+export type MeaningEntry = InferType<typeof meaningEntrySchema>;
 export type Meaning = InferType<typeof meaningSchema>;
diff --git a/views/interactivity/src/index.css b/views/interactivity/src/index.css
index ec2585e..cc04720 100644
--- a/views/interactivity/src/index.css
+++ b/views/interactivity/src/index.css
@@ -1,13 +1,43 @@
-body {
+/* Reset some default styling */
+* {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  padding: 0;
+  box-sizing: border-box;
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+  background-color: #f5f5f5; /* Background color */
+  line-height: 1.6;
+  font:
+    16px/1.5em 'Overpass',
+    'Open Sans',
+    Helvetica,
     sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  color: #333;
+  font-weight: 300;
+}
+/* Style for body to fill the viewport */
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 100vh;
+  padding: 1.25em;
+}
+body.center {
+  justify-content: center;
+}
+#root {
+  width: 100%;
+  padding-bottom: 2em;
+}
+/* Link styles */
+a {
+  color: #3498db;
+  text-decoration: none;
 }
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+a:hover {
+  text-decoration: underline;
 }
diff --git a/views/interactivity/src/lib/utils.test.ts b/views/interactivity/src/lib/utils.test.ts
index 26b0286..5c6fd87 100644
--- a/views/interactivity/src/lib/utils.test.ts
+++ b/views/interactivity/src/lib/utils.test.ts
@@ -26,9 +26,15 @@ describe('decodeBase64Gzip()', () => {
 });
 
 describe('iso8601ToDateTime()', () => {
-  test('function should return datetime string when iso 8601 datetime is given', () => {
+  test('function should return datetime string when iso-8601 datetime string is given', () => {
     expect(utils.iso8601ToDateTime('2024-01-01T00:00:00.000Z')).toBe(
       '2024-01-01 00:00:00',
     );
   });
+
+  test('function should return datetime string when datetime object is given', () => {
+    expect(utils.iso8601ToDateTime(new Date('2024-01-01T00:00:00.000Z'))).toBe(
+      '2024-01-01 00:00:00',
+    );
+  });
 });
diff --git a/views/interactivity/src/lib/utils.ts b/views/interactivity/src/lib/utils.ts
index 7f564b1..098817b 100644
--- a/views/interactivity/src/lib/utils.ts
+++ b/views/interactivity/src/lib/utils.ts
@@ -8,7 +8,10 @@ export class Utils {
     return pako.inflate(binaryData, { to: 'string' });
   }
 
-  iso8601ToDateTime(iso8601: string) {
+  iso8601ToDateTime(iso8601: string | Date) {
+    if (iso8601 instanceof Date) {
+      iso8601 = iso8601.toISOString();
+    }
     // iso 8601: YYYY-MM-DDThh:mm:ss.SSSZ
     return iso8601.split('.')[0].replace('T', ' ');
   }