/
bomjkee
/
hackathon-mini-app
Обзор
Документация
Войти
/
bomjkee
/
hackathon-mini-app
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
src/components/DisplayData/DisplayData.tsx
60 строк
2 KB
bomjkee
first commit
22 фев 2025, 23:54
22 фев 2025, 23:54
bf0b735
Код
Авторство
О чём код?
import { isRGB } from '@telegram-apps/sdk-react'; import { Cell, Checkbox, Section } from '@telegram-apps/telegram-ui'; import type { FC, ReactNode } from 'react'; import './DisplayData.css'; import { RGB } from '../RGB/RGB'; import { Link } from '../Link/Link'; export type DisplayDataRow = & { title: string } & ( | { type: 'link'; value?: string } | { value: ReactNode } ) export interface DisplayDataProps { header?: ReactNode; footer?: ReactNode; rows: DisplayDataRow[]; } export const DisplayData: FC<DisplayDataProps> = ({ header, rows }) => ( <Section header={header}> {rows.map((item, idx) => { let valueNode: ReactNode; if (item.value === undefined) { valueNode = <i>empty</i>; } else { if ('type' in item) { valueNode = <Link to={item.value}>Open</Link>; } else if (typeof item.value === 'string') { valueNode = isRGB(item.value) ? <RGB color={item.value} /> : item.value; } else if (typeof item.value === 'boolean') { valueNode = <Checkbox checked={item.value} disabled />; } else { valueNode = item.value; } } return ( <Cell className='display-data__line' subhead={item.title} readOnly multiline={true} key={idx} > <span className='display-data__line-value'> {valueNode} </span> </Cell> ); })} </Section> );