Advertisement
cwunder

Untitled

Jan 4th, 2024
1,095
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. 'use client';
  2.  
  3. import * as TabsPrimitive from '@radix-ui/react-tabs';
  4. import { useTheme } from 'next-themes';
  5. import type { FC } from 'react';
  6.  
  7. import Button from '@/components/Common/Button';
  8. import CodeBox from '@/components/Common/CodeBox';
  9. import CodeTabs from '@/components/Common/CodeTabs';
  10. import WithFooter from '@/components/withFooter';
  11. import WithNavBar from '@/components/withNavBar';
  12. import { useDetectOS } from '@/hooks';
  13. import { useRouter } from '@/navigation.mjs';
  14.  
  15. const nvmContent = `# Install Node Version Manager (NVM)\ncurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash\n\n# Install Node.js\nnvm install --lts\n\n# Check that Node is installed\nnode -v\n\n# Check your NPM version\nnpm -v`;
  16. const chocoContent = `# Install Chocolatey\nSet-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))\n\n# Install Node.js\nchoco install nodejs-lts\n\n# Check that Node is installed\nnode -v\n\n# Check your NPM version\nnpm -v`;
  17.  
  18. const downloadTabs = [
  19.   { key: 'nvm', label: 'macOS / Linux (nvm)' },
  20.   { key: 'choco', label: 'Windows (Chocolatey)' },
  21. ];
  22.  
  23. const HomeLayout: FC = () => {
  24.   const { os } = useDetectOS();
  25.   const { resolvedTheme } = useTheme();
  26.   const { push } = useRouter();
  27.  
  28.   return (
  29.     <>
  30.       <WithNavBar />
  31.  
  32.       <div className="flex flex-row">
  33.         <section>
  34.           {/* code for optional banner TODO */}
  35.  
  36.           <Button
  37.             onClick={() => push('/download')}
  38.             variant={resolvedTheme === 'dark' ? 'special' : 'primary'}
  39.           >
  40.             {/* this should be i18n */}
  41.             Download Node.js
  42.           </Button>
  43.  
  44.           <a>
  45.             {/* this should be i18n */}
  46.             Get Started
  47.           </a>
  48.         </section>
  49.  
  50.         <section>
  51.           <CodeTabs
  52.             tabs={downloadTabs}
  53.             defaultValue={os === 'WIN' ? 'choco' : 'nvm'}
  54.             linkUrl="/download/package-manager"
  55.             linkText="More Options (this should be i18n)"
  56.           >
  57.             <TabsPrimitive.Content value="nvm">
  58.               <CodeBox language="Bash">
  59.                 <code>{nvmContent}</code>
  60.               </CodeBox>
  61.             </TabsPrimitive.Content>
  62.             <TabsPrimitive.Content value="choco">
  63.               <CodeBox language="Bash">
  64.                 <code>{chocoContent}</code>
  65.               </CodeBox>
  66.             </TabsPrimitive.Content>
  67.           </CodeTabs>
  68.  
  69.           <span>
  70.             {/* note this should be i18n, including the option of Chocolate or NVM */}
  71.             Copy and paste this snippet to install Node.js LTS via{' '}
  72.             {os === 'WIN' ? 'Chocolatey' : 'NVM'}
  73.           </span>
  74.         </section>
  75.       </div>
  76.  
  77.       <WithFooter />
  78.     </>
  79.   );
  80. };
  81.  
  82. export default HomeLayout;
  83.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement