|
| 1 | +# Desktop Download Component |
| 2 | + |
| 3 | +A React component for downloading the latest Remix Desktop application from GitHub releases. |
| 4 | + |
| 5 | +## Features |
| 6 | + |
| 7 | +- **Auto OS Detection**: Automatically detects the user's operating system (Windows, macOS, Linux) and suggests the appropriate download |
| 8 | +- **Architecture Support**: Detects Apple Silicon Macs and provides ARM64 builds when available |
| 9 | +- **Smart Caching**: Caches release data for 30 minutes to reduce API calls |
| 10 | +- **Internationalization**: Fully supports i18n with FormattedMessage components |
| 11 | +- **Responsive Design**: Works on both desktop and mobile devices |
| 12 | +- **Error Handling**: Graceful fallback when GitHub API is unavailable |
| 13 | + |
| 14 | +## Usage |
| 15 | + |
| 16 | +```tsx |
| 17 | +import { DesktopDownload } from '@remix-ui/desktop-download' |
| 18 | + |
| 19 | +function MyComponent() { |
| 20 | + return ( |
| 21 | + <div> |
| 22 | + {/* Compact layout (default) */} |
| 23 | + <DesktopDownload /> |
| 24 | + |
| 25 | + {/* Full layout */} |
| 26 | + <DesktopDownload compact={false} /> |
| 27 | + </div> |
| 28 | + ) |
| 29 | +} |
| 30 | +``` |
| 31 | + |
| 32 | +### Compact Layout (Default) |
| 33 | +Perfect for navigation bars, toolbars, or anywhere space is limited. Shows a button with "Download Remix Desktop {OS} {version}" and a small muted link to other releases below. |
| 34 | + |
| 35 | +```tsx |
| 36 | +<DesktopDownload /> |
| 37 | +<DesktopDownload compact={true} /> |
| 38 | +``` |
| 39 | + |
| 40 | +### Full Layout |
| 41 | +Great for landing pages, cards, or dedicated download sections. Shows detailed information including release date, file size, and platform-specific icons. |
| 42 | + |
| 43 | +```tsx |
| 44 | +<DesktopDownload compact={false} /> |
| 45 | +``` |
| 46 | + |
| 47 | +### Span Variant |
| 48 | +Perfect for dropdown items or anywhere you need a simple link without button styling. |
| 49 | + |
| 50 | +```tsx |
| 51 | +<DesktopDownload variant="span" /> |
| 52 | +``` |
| 53 | + |
| 54 | +### With custom styling |
| 55 | + |
| 56 | +```tsx |
| 57 | +<DesktopDownload className="my-custom-class" compact={false} /> |
| 58 | +<DesktopDownload style={{ color: '#007bff', fontSize: '14px' }} /> |
| 59 | +<DesktopDownload variant="span" style={{ fontWeight: 'bold' }} /> |
| 60 | +``` |
| 61 | + |
| 62 | +## Props |
| 63 | + |
| 64 | +| Prop | Type | Default | Description | |
| 65 | +|------|------|---------|-------------| |
| 66 | +| `className` | `string` | `''` | Additional CSS classes to apply to the component | |
| 67 | +| `compact` | `boolean` | `true` | Whether to use compact single-line layout or full multi-line layout | |
| 68 | +| `variant` | `'button' \| 'span'` | `'button'` | Whether to render as a button or as a simple span/link | |
| 69 | +| `style` | `React.CSSProperties` | `{}` | Inline styles to apply to the root component | |
| 70 | + |
| 71 | +## Platform Support |
| 72 | + |
| 73 | +The component automatically detects and provides downloads for: |
| 74 | + |
| 75 | +- **Windows**: `.exe` installer |
| 76 | +- **macOS**: `.dmg` disk image (ARM64 for Apple Silicon, Intel for older Macs) |
| 77 | +- **Linux**: `.deb` package (with `.AppImage` fallback) |
| 78 | + |
| 79 | +## API |
| 80 | + |
| 81 | +The component fetches release data from: |
| 82 | +`https://api.github.com/repos/remix-project-org/remix-desktop/releases/latest` |
| 83 | + |
| 84 | +## Caching |
| 85 | + |
| 86 | +Release data is cached in localStorage for 30 minutes to reduce GitHub API calls and improve performance. |
| 87 | + |
| 88 | +## Dependencies |
| 89 | + |
| 90 | +- React 18+ |
| 91 | +- @remix-ui/helper (for CustomTooltip) |
| 92 | +- react-intl (for internationalization) |
| 93 | +- Bootstrap CSS classes (for styling) |
| 94 | +- FontAwesome icons (for platform icons) |
0 commit comments