Add call details area

src/App.jsx

@@ -8,21 +8,24 @@ import Call from './Call.jsx';
 
 const App = () => {
 	const [recent, setRecent] = useState(true)
-	const [call, setCall] = useState()
+	const [entry, setEntry] = useState()
 
-	let focus = <Feed recent={recent} onSelect={ (c) => setCall(c) }/>
-	if (call) {
-		focus = <Call/>
+	let focus = <Feed recent={recent} onSelect={ (c) => setEntry(c) }/>
+	if (entry) {
+		focus = <Call info={entry}/>
 	}
 
   return (
     <div className='container'>
+
       <Header/>
 	  <Navigator onPageChange={ (r) => setRecent(r) }
 	  recent={recent}/>
+
       <div className="container-view">
 	  {focus}
 	  </div>
+
     </div>
   );
 };

src/Call.jsx

@@ -0,0 +1,54 @@
+import React, {useState, useEffect} from 'react';
+
+function ContactIcon() {
+	return (
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+		xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0
+		350 350" xmlSpace="preserve"> <g> <path
+		d="M175,171.173c38.914,0,70.463-38.318,70.463-85.586C245.463,38.318,
+		235.105,0,175,0s-70.465,38.318-70.465,85.587
+		C104.535,132.855,136.084,171.173,175,171.173z"/> <path
+		d="M41.909,301.853C41.897,298.971,41.885,301.041,
+		41.909,301.853L41.909,301.853z"/>
+		<path d="M308.085,304.104C308.123,303.315,308.098,
+		298.63,308.085,304.104L308.085,304.104z"/>
+		<path d="M307.935,298.397c-1.305-82.342-12.059-105.805-94.352-120.657c0,
+		0-11.584,14.761-38.584,14.761
+		s-38.586-14.761-38.586-14.761c-81.395,14.69-92.803,37.805-94.303,
+		117.982c-0.123,6.547-0.18,6.891-0.202,6.131
+		c0.005,1.424,0.011,4.058,0.011,8.651c0,
+		0,19.592,39.496,133.08,39.496c113.486,0,133.08-39.496,133.08-39.496
+		c0-2.951,0.002-5.003,0.005-6.399C308.062,304.575,308.018,303.664,
+		307.935,298.397z"/>
+		</g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g>
+		</g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g>
+		</svg>
+	)
+}
+
+function Call(props) {
+	return (
+		<div className="call">
+
+		<ContactIcon/>
+		<h3>{props.info.direction == 'inbound'
+			? props.info.from
+			: props.info.to}
+		</h3>
+
+		<h4>
+		{new Date(props.info.created_at).toLocaleTimeString([],
+					{hour: '2-digit', minute: '2-digit'})
+		} - {props.info.call_type}
+		</h4>
+
+		<h4>
+			{parseInt(props.info.duration / 60)} mins
+			{props.info.duration % 60} seconds
+		</h4>
+
+		</div>
+	)
+}
+
+export default Call

src/Feed.jsx

@@ -38,9 +38,9 @@ function PhoneSymbol(props) {
 
 }
 
-function DetailSymbol() {
+function DetailSymbol(props) {
 	return (
-		<svg width="1em" height="1em" viewBox="0 0 16 16" className="bi
+		<svg onClick={() => props.onClick()}width="1em" height="1em" viewBox="0 0 16 16" className="bi
 			bi-chevron-right detail icon" fill="currentColor"
 			xmlns="http://www.w3.org/2000/svg"> <path strokeWidth="1px"
 			fillRule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0
@@ -67,7 +67,8 @@ function Feed(props) {
 
 
 	useEffect(() => {
-		fetch('https://aircall-job.herokuapp.com/activities').then(response => {
+		fetch('https://aircall-job.herokuapp.com/activities')
+			.then(response => {
 			return response.json()
 		}).then(data => {
 			setStack(data)
@@ -93,10 +94,12 @@ function Feed(props) {
 				</h4>
 
 				<small>{(new Date(entry.created_at).toLocaleTimeString([],
-					{hour: '2-digit', minute: '2-digit'}))} - {entry.call_type}
+					{hour: '2-digit',
+						minute: '2-digit'}))} - {entry.call_type}
 				</small>
 
-				<DetailSymbol></DetailSymbol>
+				<DetailSymbol onClick={() => props.onSelect(entry)}>
+				</DetailSymbol>
 
 				</li>
 			)