main commit

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -34,5 +35,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
+    "tailwindcss": "^3.1.4"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/index.html

@@ -9,12 +9,14 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="../dist/output.css" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,24 +1,80 @@
-import logo from './logo.svg';
-import './App.css';
 
+import './App.css';
+import DeriveCard from './deriveCard';
+import menuItems from './navItems';
+import MenuItem from './Components/DropdownButton/MenuItem';
+import TextInput2 from './Components/TextInput2'
 function App() {
+  const options = [
+    {
+        title : 'google',
+        link : 'www.google.com'
+    },
+    {
+        title : 'twitter',
+        link : 'www.twitter.com'
+    },
+    {
+        title : 'amazon',
+        link : 'www.amazon.com'
+    }
+];
+
+const options2 = [
+  {
+      title : 'google',
+      link : 'www.google.com'
+  },
+  {
+      title : 'twitter',
+      link : 'www.twitter.com'
+  },
+  {
+      title : 'facebook',
+      link : 'www.facebook.com'
+  },
+  {
+    title : 'bing',
+    link : 'www.bing.com'
+  },
+  {
+    title : 'snapdeal',
+    link : 'www.snapdeal.com'
+  },
+  {
+    title : 'snapdeal',
+    link : 'www.snapdeal.com'
+  },
+  {
+    title : 'snapdeal',
+    link : 'www.snapdeal.com'
+  }
+];
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <main className='font-inter'>
+      <nav className='z-10 w-full bg-white border-b-[1px] border-gray-100 drop-shadow-sm '>
+        <ul className='flex justify-around'>
+          {menuItems?.map((items, i) => {
+            return <MenuItem
+            role  = 'menu'
+              depthLevel={0}
+              items={items}
+              key={i} />
+          })}
+        </ul>
+      </nav>
+     <DeriveCard/>
+      <div className='flex flex-col'>
+          <div>Text Input</div>
+          <div className='m-12'>
+            <TextInput2 options = {options}/>
+          </div>
+          <div className='m-12'>
+            <TextInput2 options = {options2}/>
+          </div>
+      </div>
+          </main>
   );
 }
 

src/Components/Card.jsx

@@ -0,0 +1,55 @@
+// @description of props
+// => buttonUrl : url for 'view details' button.
+// => chipText : array of strings
+// => logo : image src 
+// => other props can be string => title, subtitle, location,startDate,duration,stipend,applyBy
+
+import { FaMapMarkerAlt, FaRegPlayCircle, FaRegCalendarAlt, FaHourglassStart, FaRegMoneyBillAlt } from 'react-icons/fa';
+const Card = ({ title, subtitle, location, startDate, duration, stipend, applyBy, chipText, logo, buttonUrl }) => {
+    return (
+        <div className="-z-10 md:w-[614px] p-[23px] h-auto w-full mt-2 border-[1px] border-gray-200 shadow-[0 1px 2px rgb(0 0 0 / 8%)] rounded-md ">
+            {logo ? <img src={logo} alt="company logo" className="h-8 w-8 inline float-right" /> : null}
+            {title ? <h2 className="text-2xl font-semibold">{title}</h2> : null}
+            {subtitle ? <h4 className="text-md font-semibold text-gray-500 my-2 ">{subtitle}</h4> : null}
+            {location ? <p className="text-sm my-4"><FaMapMarkerAlt className='inline mx-[2px] mb-[4px] ' />{location}</p> : null}
+            <div className=" md:space-x-12 flex md:w-full sm:w-[55%] flex-wrap flex-row ">
+                {startDate ? <div className='md:p-1 p-2'>
+                        <FaRegPlayCircle className='text-gray-400 mx-[4px] inline mb-[4px]' />
+                        <p className="md:inline hidden text-gray-400 font-semibold text-sm">START DATE</p>
+                    <p className='text-sm md:block inline'>{startDate}</p>
+                </div> : null}
+
+                {duration ? <div  className='md:p-1 p-2'>
+                        <FaRegCalendarAlt className="text-gray-400 inline mx-[4px] mb-[4px]" />
+                        <p className="md:inline hidden text-gray-400 font-semibold text-sm">DURATION</p>
+                        <p className='text-sm md:block inline'>{duration}</p>
+                </div> : null}
+
+                {stipend ? <div  className='md:p-1 p-2'>
+                        <FaRegMoneyBillAlt className="text-gray-400 inline mx-[4px] mb-[4px] " />
+                        <p className="md:inline hidden text-gray-400 font-semibold text-sm">STIPEND</p>
+                       <p className='text-sm md:block inline'>{stipend}</p>
+
+                </div> : null}
+
+                {applyBy ? <div  className='md:p-1 p-2'>    
+                        <FaHourglassStart className="text-gray-400 inline mx-[4px] mb-[4px] " />
+                        <p className="md:inline hidden text-gray-400 font-semibold text-sm">APPLY BY</p>  
+                        <p className='text-sm md:block inline'>{applyBy}</p>
+
+                </div> : null}
+            </div>
+            <div className='flex justify-between'>
+                <div className="my-4 w-[28rem] space-x-4 flex flex-wrap">
+                    {chipText?.map((chip) => {
+                        return <div className=" text-xs rounded-full px-4 py-[3px] mt-2 bg-gray-100">{chip}</div>
+                    })}
+                </div>
+                <div className='sm:text-md text-sm text-blue-600 font-semibold float-right mt-4'>
+                    <a href={buttonUrl} >View Details {'>'}</a>
+                </div>
+            </div>
+        </div>
+    );
+}
+export default Card;

src/Components/DropdownButton/MenuItem.jsx

@@ -0,0 +1,35 @@
+import {useState} from 'react';
+ import './scrollbar.css';
+const MenuItem=({items,depthLevel,allSubMenu})=>{
+    const [open,setOpen] = useState(false);
+    return(
+    <li role = 'menu' onMouseEnter={()=>setOpen((prev)=>!prev)} onMouseLeave ={()=>setOpen((prev)=>!prev) } className = {` z-10 bg-white relative  ${depthLevel===0? 'hover:border-b-2 border-blue-500':''}hover:bg-blue-100` } >
+
+                {
+                 items.submenu?
+                (<>
+
+                    <button className = {`p-2`} aria-haspopup = 'menu' aria-expanded = {open?true:false}>
+                          {items.title + " "}{depthLevel>0 && <span>{'>'}</span>}
+                    </button>
+                     <DropDown depthLevel = {depthLevel} subitems = {items.submenu} open={open} setOpen = {setOpen} allSubMenu={allSubMenu}/>
+                </>)
+            : (<button className = "p-2" ><a  href = {items.link?items.link:"#"}>{items.title}</a></button>)}
+            </li>
+    );  
+}
+const DropDown = ({depthLevel,subitems,open})=>{ 
+    depthLevel+=1;
+    return(
+        <div>
+        <ul id = "scrollbar" className = {open?('bg-white z-10 absolute w-[200px] h-[300px] top-[2.62rem] overflow-x-visible drop-shadow-md' + `${depthLevel > 1 ? " left-[100%] top-[0rem] overflow-y-scroll overflow-x-hidden" : ''} ${depthLevel>2 && 'hidden'}`) :( 'hidden')}>
+            {
+                subitems.map((subitem,i)=>{
+                    return <MenuItem items = {subitem} depthLevel = {depthLevel} key = {i}/>
+                })
+            }
+        </ul>
+        </div>
+    );
+}
+export default MenuItem;

src/Components/DropdownButton/scrollbar.css

@@ -0,0 +1,12 @@
+#scrollbar::-webkit-scrollbar{
+    width: 5px;
+}
+#scrollbar::-webkit-scrollbar-track{
+    background-color: #f1f1f1;
+}
+#scrollbar::-webkit-scrollbar-thumb{
+    background-color: #888;
+}
+#scrollbar::-webkit-scrollbar-thumb:hover{
+    background-color: #888;
+}

src/Components/TextInput2.jsx

@@ -0,0 +1,47 @@
+import {useState} from 'react';
+import './DropdownButton/scrollbar.css'
+const TextInput2=({options})=>{
+    const [search,setSearch] = useState('');
+    const [open,setOpen] = useState(false);
+
+    return(
+        <>
+            <input
+            className = "h-8 w-80 p-2 border-2 border-gray-300 rounded-sm  shadow appearance-none  text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-blue-300 hover:blue-300`"
+                type = "text"
+                onChange = {(e)=>{
+                    e.preventDefault();
+                    setSearch(e.target.value);
+                }}
+                onFocus = {()=>{
+                    setOpen(true);
+                }}
+                onBlur = {()=>{
+                    setTimeout(()=>setOpen(false),200)
+                }}
+                value = {search}
+            />
+
+           {open && <div id = "scrollbar" className='h-[8rem] bg-white w-[20rem] drop-shadow-md overflow-y-auto backdrop-filter'>
+                {
+                    options.filter((item,i)=>{
+                        if(search === ""){
+                            return item;
+                        }else if(item.title.toLowerCase().includes(search.toLowerCase())){
+                            return item;
+                        }   
+                    }).map((item,i)=>{
+                        return (
+                            <div>
+                                { <p className = "hover:bg-blue-100 hover:text-blue-600 h-[2.2rem] w-full " key = {i}><a target = '_blank' href = {'//' + item.link}>{item.title}</a></p>}
+                            </div>
+
+                        )
+                    })
+                }
+            </div>}
+        </>
+    );
+}
+
+export default TextInput2;