import { BREAKPOINT } from '@preply/ds-core';
import React, { FC } from 'react';

export const BreakpointList: FC = () => (
    <table style={{ fontSize: 14 }}>
        <tbody>
            {Object.entries(BREAKPOINT).map(([key, value]) => (
                <tr key={key}>
                    <td style={{ padding: '0px 40px 10px 20px' }}>
                        <code>{key}</code>
                    </td>
                    <td style={{ padding: '0px 40px 10px 20px' }}>
                        <code>{value}px</code>
                    </td>
                </tr>
            ))}
        </tbody>
    </table>
);
