style(app): refactor cli page

apps/app/src/routes/cli.lazy.tsx

@@ -1,5 +1,6 @@
-import { Card, CardContent, CardHeader } from '@boring.tools/ui'
+import { Button, Card, CardContent, CardHeader, cn } from '@boring.tools/ui'
 import { Link, createLazyFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
 import { PageWrapper } from '../components/PageWrapper'
 
 const Platforms = [
@@ -34,6 +35,8 @@ const Platforms = [
 ]
 
 const Component = () => {
+  const [activePlatform, setPlatform] = useState('Linux')
+  const getPlatform = Platforms.find((p) => p.name === activePlatform)
   return (
     <PageWrapper breadcrumbs={[{ name: 'CLI', to: '/cli' }]}>
       <div className="flex flex-col gap-5 w-full md:max-w-screen-lg">
@@ -42,35 +45,53 @@ const Component = () => {
           With our CLI you can upload your commits for your changelog in just a
           few seconds.
         </p>
-        <h2 className="text-xl">Download</h2>
+        <h2 className="text-xl">Platform</h2>
         <div className="grid grid-cols-2 md:grid-cols-4 gap-10">
           {Platforms.map((platform) => {
             return (
-              <a
+              // <a
-                href={`https://cdn.boring.tools${platform.path}`}
+              //   href={`https://cdn.boring.tools${platform.path}`}
+              //   key={`${platform.arch}-${platform.name}`}
+              //   download={platform.filename}
+              // >
+              <Card
+                className={cn('hover:border-accent transition', {
+                  'border-accent': platform.name === activePlatform,
+                })}
                 key={`${platform.arch}-${platform.name}`}
-                download={platform.filename}
+                onClick={() => setPlatform(platform.name)}
               >
-                <Card className="hover:border-accent transition">
+                <CardHeader>
-                  <CardHeader>
+                  <img
-                    <img
+                    src={platform.svg}
-                      src={platform.svg}
+                    alt={platform.name}
-                      alt={platform.name}
+                    className="h-10 md:h-20"
-                      className="h-10 md:h-20"
+                  />
-                    />
+                </CardHeader>
-                  </CardHeader>
+                <CardContent className="text-center">
-                  <CardContent className="text-center">
+                  {platform.arch}
-                    {platform.arch}
+                </CardContent>
-                  </CardContent>
+              </Card>
-                </Card>
+              // </a>
-              </a>
             )
           })}
         </div>
-
+        <h2 className="text-xl">Download</h2>
+        <Button asChild variant={'outline'}>
+          <a
+            href={`https://cdn.boring.tools${getPlatform?.path}`}
+            download={getPlatform?.filename}
+          >
+            https://cdn.boring.tools{getPlatform?.path}
+          </a>
+        </Button>
+        <h2 className="text-xl">WGET</h2>
+        <pre className="bg-muted text-xs md:text-xl p-3 rounded text-center flex justify-between items-center">
+          wget https://cdn.boring.tools{getPlatform?.path}
+        </pre>
         <h2 className="text-xl">Usage</h2>
         <pre className="bg-muted text-xs md:text-xl p-3 rounded text-center flex justify-between items-center">
-          bt --changelogId=... --token=bt_...
+          {getPlatform?.filename} --help
         </pre>
 
         <p className="text-muted-foreground">
@@ -80,7 +101,7 @@ const Component = () => {
         <pre className="bg-muted text-xs md:text-xl p-3 rounded text-center flex justify-between items-center">
           BT_CHANGELOG_ID=...
           <br />
-          BT_AUTH_TOKEN=bt_...
+          BT_ACCESS_TOKEN=bt_...
         </pre>
 
         <p className="text-muted-foreground">