feat(plays): add dictionary play

src/plays/dictionary/Dictionary.js

@@ -0,0 +1,46 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import DictionaryContainer from './DictionaryContainer';
+
+// WARNING: Do not change the entry componenet name
+function Dictionary(props) {
+  const [word, setWord] = useState('');
+  const [dicData, setDicData] = useState([]);
+
+  const url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
+
+  // const { data, loading, error } = useFetch(DIC_API_URI);
+  // setDicData(data);
+
+  const handleClick = () => {
+    axios.get(url).then((res) => setDicData(res.data));
+  };
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={props} />
+        <div className="flex flex-col w-full justify-center items-center mt-5 gap-4">
+          <span className="w-fit">
+            <label htmlFor="dic-input">Enter the word: </label>
+            <input
+              className="border-blue-600 rounded-md border-2 px-2 py-1"
+              id="dic-input"
+              type="text"
+              value={word}
+              onChange={(e) => setWord(e.target.value)}
+            />
+          </span>
+          <button className="rounded-md bg-blue-500 text-white p-3" onClick={handleClick}>
+            Find Definition
+          </button>
+
+          {dicData.length > 0 && <DictionaryContainer data={dicData} />}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Dictionary;

src/plays/dictionary/DictionaryContainer.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { AiFillSound } from 'react-icons/ai';
+
+const handlePronunciation = (data) => {
+  const audioUrl = data[0]['phonetics'][0]['audio'];
+  const audio = new Audio(audioUrl);
+
+  audio.play();
+};
+
+const DictionaryContainer = ({ data }) => {
+  return (
+    <div>
+      <span className="flex items-center gap-2">
+        <h1 className="font-bold text-lg text-blue-300">{data[0]['word'].toUpperCase()}</h1>
+        <AiFillSound
+          className="hover:cursor-pointer text-blue-300"
+          onClick={() => handlePronunciation(data)}
+        />
+      </span>
+      {data[0]['meanings'].map((item, index) => {
+        return (
+          <div className="bg-blue-200 p-3 rounded-md mt-2 mb-2" key={item}>
+            <h2 className="text-gray-500 font-bold">{item['partOfSpeech']}</h2>
+            {item['definitions'].map((defn, index) => {
+              return (
+                <div>
+                  <p key={index}>: {defn['definition']}</p>
+                </div>
+              );
+            })}
+            <h2>Synonyms: </h2>
+            {item['synonyms'] &&
+              item['synonyms'].map((syn, index) => {
+                return (
+                  <span className="mx-2" key={syn}>
+                    {syn}
+                  </span>
+                );
+              })}
+            <h2>Antonyms: </h2>
+            {item['antonyms'] &&
+              item['antonyms'].map((ant, index) => {
+                return (
+                  <span className="mx-2" key={ant}>
+                    {ant}
+                  </span>
+                );
+              })}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default DictionaryContainer;

src/plays/dictionary/Readme.md

@@ -0,0 +1,25 @@
+# Dictionary
+
+Display the definition, pronunciation, antonyms and synonyms of the word
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: ananya-bhardwaj
+- Gihub Link: https://github.com/ananya-bhardwaj
+
+## Implementation Details
+
+This implenmetation uses axios to call a remote API. The remote API returns the meaning as well as synonyms and antonyms of the word entered by the user, which is rendered. 
+
+## Consideration
+
+- API call using axios
+
+## Resources
+
+- NA