| 26 | ) |
| 27 | } |
| 28 | export const BodyContent = () => { |
| 29 | return ( |
| 30 | <tbody className="align-baseline "> |
| 31 | {typographyData.body.map((data, index) => ( |
| 32 | <tr key={data['font-size']}> |
| 33 | <td |
| 34 | translate="no" |
| 35 | className="border-t border-metal-100 px-4 py-3 text-body-4 font-normal text-metal-500 dark:border-metal-800 dark:text-metal-300"> |
| 36 | text-body-{index + 1} |
| 37 | </td> |
| 38 | <td |
| 39 | translate="no" |
| 40 | className="border-t border-metal-100 px-4 py-3 text-body-4 font-normal text-metal-500 dark:border-metal-800 dark:text-metal-300"> |
| 41 | font-size: {data['font-size']}; /* {remToPx(data['font-size'])} */ |
| 42 | <br /> |
| 43 | line-height: {data['line-height']}; /* {remToPx(data['line-height'])} */ |
| 44 | <br /> |
| 45 | letter-spacing: {data['letter-spacing']}; |
| 46 | </td> |
| 47 | </tr> |
| 48 | ))} |
| 49 | </tbody> |
| 50 | ) |
| 51 | } |
| 52 | export const DisplayContent = () => { |
| 53 | return ( |
| 54 | <tbody className="align-baseline "> |