Skip to content

Commit 8527846

Browse files
araujoguiaraujogui
committed
feat: split minor releases columns
1 parent 6984175 commit 8527846

4 files changed

Lines changed: 70 additions & 67 deletions

File tree

‎apps/site/components/Releases/MinorReleasesTable/index.tsx‎

Lines changed: 57 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -21,70 +21,64 @@ const MinorReleasesTable: FC<MinorReleasesTableProps> = ({ releases }) => {
2121
const t = useTranslations();
2222

2323
return (
24-
<div className={styles.scrollable}>
25-
<table>
26-
<thead className={styles.header}>
27-
<tr>
28-
<th>{t('components.minorReleasesTable.version')}</th>
29-
<th>{t('components.minorReleasesTable.information')}</th>
30-
<th>{t('components.minorReleasesTable.links')}</th>
31-
</tr>
32-
</thead>
33-
<tbody>
34-
{releases.map(release => (
35-
<tr key={release.version}>
36-
<td>
37-
<Link href={`/download/archive/v${release.version}`}>
38-
v{release.version}
24+
<table>
25+
<thead>
26+
<tr>
27+
<th>{t('components.minorReleasesTable.version')}</th>
28+
<th>{t('components.minorReleasesTable.nApiVersion')}</th>
29+
<th>{t('components.minorReleasesTable.npmVersion')}</th>
30+
<th>{t('components.minorReleasesTable.v8Version')}</th>
31+
<th>{t('components.minorReleasesTable.links')}</th>
32+
</tr>
33+
</thead>
34+
<tbody>
35+
{releases.map(release => (
36+
<tr key={release.version}>
37+
<td data-label={t('components.minorReleasesTable.version')}>
38+
<Link href={`/download/archive/v${release.version}`}>
39+
v{release.version}
40+
</Link>
41+
</td>
42+
<td data-label={t('components.minorReleasesTable.nApiVersion')}>
43+
{release.modules && (
44+
<ReleaseOverviewItem
45+
Icon={CodeBracketSquareIcon}
46+
title={`v${release.modules}`}
47+
className={styles.releaseOverviewItem}
48+
/>
49+
)}
50+
</td>
51+
<td data-label={t('components.minorReleasesTable.npmVersion')}>
52+
{release.npm && (
53+
<ReleaseOverviewItem
54+
Icon={NpmIcon}
55+
title={`v${release.npm}`}
56+
className={styles.releaseOverviewItem}
57+
/>
58+
)}
59+
</td>
60+
<td data-label={t('components.minorReleasesTable.v8Version')}>
61+
<ReleaseOverviewItem
62+
Icon={CodeBracketSquareIcon}
63+
title={`v${release.v8}`}
64+
className={styles.releaseOverviewItem}
65+
/>
66+
</td>
67+
<td>
68+
<div className={styles.additionalLinks}>
69+
<Link href={getNodeApiUrl(`v${release.version}`)}>
70+
{t('components.minorReleasesTable.actions.docs')}
3971
</Link>
40-
</td>
41-
<td>
42-
<div className={styles.items}>
43-
{release.modules && (
44-
<>
45-
<ReleaseOverviewItem
46-
Icon={CodeBracketSquareIcon}
47-
title={`v${release.modules}`}
48-
subtitle={t('components.releaseOverview.nApiVersion')}
49-
/>
50-
<Separator orientation="vertical" />
51-
</>
52-
)}
53-
{release.npm && (
54-
<>
55-
<ReleaseOverviewItem
56-
Icon={NpmIcon}
57-
title={`v${release.npm}`}
58-
subtitle={t('components.releaseOverview.npmVersion')}
59-
/>
60-
<Separator orientation="vertical" />
61-
</>
62-
)}
63-
<ReleaseOverviewItem
64-
Icon={CodeBracketSquareIcon}
65-
title={`v${release.v8}`}
66-
subtitle={t('components.releaseOverview.v8Version')}
67-
/>
68-
</div>
69-
</td>
70-
<td>
71-
<div className={styles.additionalLinks}>
72-
<Link href={getNodeApiUrl(`v${release.version}`)}>
73-
{t('components.minorReleasesTable.actions.docs')}
74-
</Link>
75-
<Separator orientation="vertical" />
76-
<LinkWithArrow
77-
href={`${BASE_CHANGELOG_URL}${release.version}`}
78-
>
79-
{t('components.minorReleasesTable.actions.changelog')}
80-
</LinkWithArrow>
81-
</div>
82-
</td>
83-
</tr>
84-
))}
85-
</tbody>
86-
</table>
87-
</div>
72+
<Separator orientation="vertical" />
73+
<LinkWithArrow href={`${BASE_CHANGELOG_URL}${release.version}`}>
74+
{t('components.minorReleasesTable.actions.changelog')}
75+
</LinkWithArrow>
76+
</div>
77+
</td>
78+
</tr>
79+
))}
80+
</tbody>
81+
</table>
8882
);
8983
};
9084

‎apps/site/components/Releases/ReleaseOverview/ReleaseOverviewItem/index.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
1+
import classNames from 'classnames';
12
import type { FC, ReactNode, SVGProps } from 'react';
23

34
import styles from './index.module.css';
45

56
type ReleaseOverviewItemProps = {
67
Icon: FC<SVGProps<SVGSVGElement>>;
78
title: ReactNode;
8-
subtitle: ReactNode;
9+
subtitle?: ReactNode;
10+
className?: string;
911
};
1012

1113
const ReleaseOverviewItem: FC<ReleaseOverviewItemProps> = ({
1214
Icon,
1315
title,
1416
subtitle,
17+
className,
1518
}) => {
1619
return (
17-
<div className={styles.item}>
20+
<div className={classNames(styles.item, className)}>
1821
<Icon />
1922
<div>
20-
<h2>{subtitle}</h2>
23+
{subtitle && <h2>{subtitle}</h2>}
2124
<h1>{title}</h1>
2225
</div>
2326
</div>

‎packages/i18n/src/locales/en.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,9 @@
217217
"minorReleasesTable": {
218218
"version": "Version",
219219
"links": "Links",
220-
"information": "Version Informations",
220+
"nApiVersion": "N-API version",
221+
"npmVersion": "npm version",
222+
"v8Version": "V8 version",
221223
"actions": {
222224
"release": "Release",
223225
"changelog": "Changelog",

‎packages/ui-components/src/styles/markdown.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,10 @@ main {
225225
dark:text-neutral-300
226226
dark:before:text-neutral-200;
227227
}
228+
229+
td div {
230+
@apply justify-end;
231+
}
228232
}
229233
}
230234
}

0 commit comments

Comments
 (0)