Add ability to make new call

src/components/Phone/DialButtons/dial-buttons.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { chunk } from 'lodash';
+import styles from './dial-buttons.module.css';
+
+interface DialButton
+{
+	title: string;
+	subTitle:string;
+}
+
+const buttons: DialButton[] = [
+	{title: "1", subTitle: " "},
+	{title: "2", subTitle: "abc"},
+	{title: "3", subTitle: "efg"},
+	{title: "4", subTitle: "hij"},
+	{title: "5", subTitle: "klm"},
+	{title: "6", subTitle: "nop"},
+	{title: "7", subTitle: "qrs"},
+	{title: "8", subTitle: "tuv"},
+	{title: "9", subTitle: "wxyz"},
+	{title: "*", subTitle: " "},
+	{title: "0", subTitle: "+"},
+	{title: "#", subTitle: " "},
+];
+
+export default function DialButtons({action}: {action: (digit: string) => void}) {
+	return (
+		<div>
+			{ chunk(buttons, 3).map((buttonRow, rowIndex) =>
+				<div key={rowIndex}>
+					{ buttonRow.map(({title, subTitle}, index) => 
+					<button key={title} className={styles["dial-button"]} onClick = {() => action(title)}>
+						<div className={styles["title"]}>{ title }</div>
+						<div className={styles["sub-title"]}>{ subTitle }</div>
+					</button>) }
+				</div>
+				)
+			}
+		</div>
+	);
+}