TypographyLinks.tsx

import React from 'react';

const TypographyLinks = () => {
    const sentence = 'The quick brown fox jumps over the lazy dog';
    const fontSizesLinks = [
        { lineHeight: 24, name: 'l', size: 16 },
        { lineHeight: 21, name: 'm', size: 14 },
        { lineHeight: 18, name: 's', size: 12 },
        { lineHeight: 15, name: 'xs', size: 10 },
    ];
    const fontWeights = [
        { name: 'normal', weight: '400' },
        { name: 'semi', weight: '600' },
    ];

    return (
        <table className="ids-table">
            <caption className="ids-table__caption">Header</caption>
            <thead className="ids-table__header">
                <tr className="ids-table__row">
                    <th className="ids-table__header-cell">Sentence</th>
                    <th className="ids-table__header-cell">Name</th>
                    <th className="ids-table__header-cell">Style</th>
                    <th className="ids-table__header-cell">Weight</th>
                    <th className="ids-table__header-cell">Size</th>
                    <th className="ids-table__header-cell">Line-height</th>
                </tr>
            </thead>
            <tbody className="ids-table__body">
                {fontWeights.map(({ name: weightName, weight }) => {
                    return fontSizesLinks.map(({ name: sizeName, size, lineHeight }) => {
                        const className = `link-${sizeName}-${weightName} ids-link`;

                        return (
                            <tr className="ids-table__row" key={className}>
                                <td className="ids-table__cell">
                                    <a className={className} href="#">
                                        {sentence}
                                    </a>
                                </td>
                                <td className="ids-table__cell">Work sans</td>
                                <td className="ids-table__cell">normal</td>
                                <td className="ids-table__cell">{weight}</td>
                                <td className="ids-table__cell">{size}px</td>
                                <td className="ids-table__cell">{lineHeight}px</td>
                            </tr>
                        );
                    });
                })}
            </tbody>
        </table>
    );
};

export default TypographyLinks;