Merge pull request #26605 from ethereum/add-note-mobile-builds

Add note mobile builds

README.md

@@ -43,7 +43,7 @@ After adding a page, you will also need to list it in `/src/data/documentation-l
 Notes in documentation pages are highlighted boxes (color depend on the current set dark/light theme). To add a note, wrap the note text in `<Note>` tage as follows:
 
 ```markdown
-<Note> text to include in note</Note>
+<Note>text to include in note</Note>
 ```
 
 <img width="809" alt="Screen Shot 2023-01-04 at 18 22 06" src="https://user-images.githubusercontent.com/948922/210652463-1fc0370e-815c-427d-9eff-64199a300460.png">

src/components/UI/docs/Note.tsx

@@ -2,15 +2,16 @@ import { FC } from 'react';
 import { Stack, Text } from '@chakra-ui/react';
 
 interface Props {
-  children: string[];
+  children: string;
 }
 
 export const Note: FC<Props> = ({ children }) => {
   return (
     <Stack w='100%' bg='button-bg' border='2px' borderColor='primary' p={4}>
-      <Text as='h4' textStyle='header4'>
+      <Text as='h4' textStyle='h4' mb={2}>
         Note
       </Text>
+
       <Text textStyle='note-text'>{children}</Text>
     </Stack>
   );

src/components/UI/downloads/BuildsDeprecationNote.tsx

@@ -0,0 +1,17 @@
+import { Stack, Text } from '@chakra-ui/react';
+import { FC } from 'react';
+
+interface Props {
+  os: string;
+}
+
+export const BuildsDeprecationNote: FC<Props> = ({ os }) => {
+  return (
+    <Stack p={4}>
+      <Text textAlign='center' bg='code-bg' p={3}>
+        <strong>Geth no longer releases builds for {os}.</strong> {os} builds on this page are
+        archival and are not consistent with current Geth.
+      </Text>
+    </Stack>
+  );
+};

src/components/UI/downloads/DownloadsTable.tsx

@@ -2,6 +2,7 @@ import { Stack, Tabs, TabList, Tab, Text, TabPanel, TabPanels } from '@chakra-ui
 import { FC, useMemo } from 'react';
 
 import { DataTable } from '../../UI';
+import { BuildsDeprecationNote } from './BuildsDeprecationNote';
 
 import { DOWNLOADS_TABLE_TABS, DOWNLOADS_TABLE_TAB_COLUMN_HEADERS } from '../../../constants';
 import { ReleaseData } from '../../../types';
@@ -102,12 +103,16 @@ export const DownloadsTable: FC<Props> = ({
             />
           </TabPanel>
           <TabPanel p={0}>
+            <BuildsDeprecationNote os='iOS' />
+
             <DataTable
               columnHeaders={DOWNLOADS_TABLE_TAB_COLUMN_HEADERS}
               data={iOSData.slice(0, amountOfReleasesToShow)}
             />
           </TabPanel>
           <TabPanel p={0}>
+            <BuildsDeprecationNote os='Android' />
+
             <DataTable
               columnHeaders={DOWNLOADS_TABLE_TAB_COLUMN_HEADERS}
               data={androidData.slice(0, amountOfReleasesToShow)}

src/components/UI/downloads/index.ts

@@ -1,3 +1,4 @@
+export * from './BuildsDeprecationNote';
 export * from './DownloadsHero';
 export * from './DownloadsSection';
 export * from './DownloadsTable';