41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
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>
|
|
);
|
|
} |