forked from Rosetta/landing
Лендинг
This commit is contained in:
RoyceDa
41
src/components/DownloadCenter/DownloadCenter.module.css
Normal file
41
src/components/DownloadCenter/DownloadCenter.module.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: var(--mantine-spacing-xl);
|
||||
padding-bottom: var(--mantine-spacing-xl);
|
||||
background-color: #0066ff05;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 34px;
|
||||
font-weight: 500;
|
||||
|
||||
@media (max-width: $mantine-breakpoint-sm) {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border: 1px solid light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
background-color: var(--mantine-color-blue-filled);
|
||||
width: 45px;
|
||||
height: 2px;
|
||||
margin-top: var(--mantine-spacing-sm);
|
||||
}
|
||||
}
|
||||
160
src/components/DownloadCenter/DownloadCenter.tsx
Normal file
160
src/components/DownloadCenter/DownloadCenter.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
Text,
|
||||
Title,
|
||||
useComputedColorScheme,
|
||||
useMantineTheme,
|
||||
} from '@mantine/core';
|
||||
import classes from './DownloadCenter.module.css';
|
||||
import { RosettaLogo } from '../RosettaLogo/RosettaLogo';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FaApple, FaWindows } from 'react-icons/fa';
|
||||
import { FcLinux } from 'react-icons/fc';
|
||||
import { Switch } from '../Switch/Switch';
|
||||
import { IconDownload } from '@tabler/icons-react';
|
||||
|
||||
interface DownloadFeature {
|
||||
platform: string;
|
||||
arch: string;
|
||||
link: string;
|
||||
version: string;
|
||||
}
|
||||
|
||||
interface UpdateItem {
|
||||
platform: string;
|
||||
arch: string;
|
||||
version: string;
|
||||
downloadUrl: string;
|
||||
}
|
||||
|
||||
const fetchUpdates = async (): Promise<DownloadFeature[]> => {
|
||||
try {
|
||||
const response = await fetch('https://sdu.rosetta.im/updates/all');
|
||||
const data = await response.json();
|
||||
|
||||
return (data.items || []).map((item: UpdateItem) => ({
|
||||
platform: item.platform,
|
||||
arch: item.arch,
|
||||
version: item.version,
|
||||
link: new URL(item.downloadUrl, 'https://sdu.rosetta.im').toString(),
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch updates:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export function DownloadCenter() {
|
||||
const theme = useMantineTheme();
|
||||
const colorScheme = useComputedColorScheme();
|
||||
const [kernels, setKernels] = useState<DownloadFeature[]>([]);
|
||||
const [targetPlatforms, setTargetPlatforms] = useState<string[]>(['darwin', 'linux', 'win32']);
|
||||
|
||||
useEffect(() => {
|
||||
fetchUpdates().then(setKernels);
|
||||
}, []);
|
||||
|
||||
const switchTarget = (value: string) => {
|
||||
let targetPlatforms: string[] = [];
|
||||
switch(value){
|
||||
case 'All':
|
||||
targetPlatforms = ['darwin', 'linux', 'win32'];
|
||||
break;
|
||||
case 'Windows':
|
||||
targetPlatforms = ['win32'];
|
||||
break;
|
||||
case 'macOS':
|
||||
targetPlatforms = ['darwin'];
|
||||
break;
|
||||
case 'Linux':
|
||||
targetPlatforms = ['linux'];
|
||||
break;
|
||||
}
|
||||
setTargetPlatforms(targetPlatforms);
|
||||
}
|
||||
|
||||
const translatePlatformToOsName = (platform: string) => {
|
||||
switch(platform){
|
||||
case 'darwin':
|
||||
return 'macOS';
|
||||
case 'linux':
|
||||
return 'Linux';
|
||||
case 'win32':
|
||||
return 'Windows';
|
||||
default:
|
||||
return platform;
|
||||
}
|
||||
}
|
||||
|
||||
const translatePlatformAndArchToCpuName = (platform : string, arch: string) => {
|
||||
switch(platform){
|
||||
case 'darwin':
|
||||
return arch === 'arm64' ? 'Apple Silicon' : 'Intel';
|
||||
case 'linux':
|
||||
return arch === 'arm64' ? 'ARM64' : 'x64';
|
||||
case 'win32':
|
||||
return arch === 'arm64' ? 'ARM64' : 'x64';
|
||||
default:
|
||||
return arch;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const features = kernels.filter((v) => targetPlatforms.includes(v.platform)).map((feature) => (
|
||||
<Card key={feature.link} radius="md" className={classes.card} padding="xl">
|
||||
<Flex direction={'column'} align="center" justify={'center'}>
|
||||
{feature.platform === 'darwin' && <FaApple size={50} color={
|
||||
colorScheme == 'dark' ? 'white' : 'black'
|
||||
} />}
|
||||
{feature.platform === 'linux' && <FcLinux size={50} />}
|
||||
{feature.platform === 'win32' && <FaWindows size={50} color={theme.colors.blue[6]} />}
|
||||
<Text fz="lg" ta={'center'} fw={500} mt="md">
|
||||
{translatePlatformToOsName(feature.platform)} - {translatePlatformAndArchToCpuName(feature.platform, feature.arch)}
|
||||
</Text>
|
||||
<Text c="dimmed" fz="sm" ta={'center'} mt="xs">
|
||||
{feature.platform == 'darwin' && <>
|
||||
{feature.arch == 'arm64' && <>
|
||||
Download this version if you have a Mac with Apple Silicon (M1, M2 chips).
|
||||
</>}
|
||||
{feature.arch == 'x64' && <>
|
||||
Download this version if you have a Mac with an Intel processor, which was most likely manufactured before 2020.
|
||||
</>}
|
||||
</>}
|
||||
{feature.platform == 'linux' && <>This version is for Linux and comes as an AppImage for the GUI versions.</>}
|
||||
{feature.platform == 'win32' && <>Download this version of you have computer on Windows 10 or later.</>}
|
||||
</Text>
|
||||
<Button component={'a'} href={feature.link} variant={'subtle'} mt={'sm'} leftSection={
|
||||
<IconDownload size={16}></IconDownload>
|
||||
}>Get {feature.version} now</Button>
|
||||
</Flex>
|
||||
</Card>
|
||||
));
|
||||
|
||||
return (
|
||||
<div className={classes.wrapper}>
|
||||
<Container id={'kernels'} mb={'xl'} size="lg" mt={'xl'}>
|
||||
<Flex justify="center" align="center" direction="row" gap={'md'}>
|
||||
<Title order={2} className={classes.title} ta="center">
|
||||
Download
|
||||
</Title>
|
||||
<RosettaLogo size={35}></RosettaLogo>
|
||||
</Flex>
|
||||
|
||||
<Text c="dimmed" className={classes.description} ta="center" mt="md">
|
||||
Choose your platform and get started with Rosetta today. Enjoy secure and fast messaging across all your devices.
|
||||
</Text>
|
||||
|
||||
<Flex justify={'center'} mt={'lg'}>
|
||||
<Switch onChange={switchTarget} data={['All', 'Windows', 'macOS', 'Linux']}></Switch>
|
||||
</Flex>
|
||||
|
||||
<Flex gap="xl" justify={'center'} wrap={'wrap'} align={'center'} mt={50}>
|
||||
{features}
|
||||
</Flex>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user