mirror of
https://github.com/Boof2015/astra-mobile.git
synced 2026-08-19 04:06:43 +02:00
Boof2015
56 lines
2.9 KiB
TypeScript
56 lines
2.9 KiB
TypeScript
import Svg, { G, Path } from 'react-native-svg';
|
|
import { useColors } from '@/theme/themed';
|
|
|
|
/**
|
|
* Astra mark — ported from desktop `astraLogoShared.ts` (same viewBox, paths,
|
|
* transforms). The desktop CSS fills `hsl(198 100% 50%)` / `hsl(198 40% 14%)`
|
|
* resolve to the hex tokens in the theme.
|
|
*/
|
|
const VIEWBOX = '0 0 1024 1024';
|
|
const BG_TRANSFORM = 'matrix(0.784074,0,0,0.973384,-34.499234,-27.254753)';
|
|
const SHADOW_TRANSFORM = 'matrix(1.726813,0,0,1.726813,-608.701518,-379.851382)';
|
|
const SHADOW_LEFT_TRANSFORM = 'matrix(1,0,0,1,-10,3)';
|
|
const SHADOW_RIGHT_TRANSFORM = 'matrix(1,0,0,1,0,3)';
|
|
const MAIN_TRANSFORM = 'matrix(1.726813,0,0,1.726813,-660.505902,-397.11951)';
|
|
|
|
const BG_PATH =
|
|
'M1286.23,28C1321.449,28 1350,50.998 1350,79.367L1350,1028.633C1350,1057.002 1321.449,1080 1286.23,1080L107.77,1080C72.551,1080 44,1057.002 44,1028.633L44,79.367C44,50.998 72.551,28 107.77,28L1286.23,28Z';
|
|
const LEFT_PATH =
|
|
'M526.083,500.65C529.86,496.662 535.112,494.402 540.605,494.402C553.071,494.402 576.056,494.402 588.831,494.402C594.652,494.402 600.185,496.939 603.984,501.35C610.054,508.396 619.61,519.49 627.207,528.31C633.905,536.085 633.631,547.668 626.573,555.117C603.295,579.689 553.937,631.788 536.916,649.755C533.139,653.742 527.889,656 522.397,656L452,656C440.954,656 432,647.046 432,636C432,626.32 432,615.247 432,607.967C432,602.851 433.96,597.93 437.478,594.215C454.783,575.942 508.184,519.551 526.083,500.65Z';
|
|
const RIGHT_PATH =
|
|
'M580,389.237C580,378.578 588.641,369.937 599.3,369.937C625.097,369.937 669.782,369.937 688.899,369.937C694.682,369.937 700.183,372.436 703.987,376.792C736.676,414.222 893.163,593.401 921.571,625.929C924.427,629.198 926,633.392 926,637.733C926,637.733 926,637.734 926,637.734C926,648.379 917.371,657.008 906.726,657.008L817.1,657.008C811.318,657.008 805.817,654.51 802.013,650.155C769.332,612.742 612.909,433.673 584.448,401.092C581.58,397.809 580,393.598 580,389.239C580,389.238 580,389.237 580,389.237Z';
|
|
|
|
interface AstraLogoProps {
|
|
size?: number;
|
|
color?: string;
|
|
includeBackground?: boolean;
|
|
}
|
|
|
|
export function AstraLogo({ size = 28, color, includeBackground = false }: AstraLogoProps) {
|
|
const colors = useColors();
|
|
const mainFill = color ?? colors.logoMain;
|
|
return (
|
|
<Svg width={size} height={size} viewBox={VIEWBOX} fill="none">
|
|
{includeBackground && (
|
|
<G transform={BG_TRANSFORM}>
|
|
<Path d={BG_PATH} fill={colors.logoBackdrop} />
|
|
</G>
|
|
)}
|
|
<G transform={SHADOW_TRANSFORM}>
|
|
<G transform={SHADOW_LEFT_TRANSFORM}>
|
|
<Path d={LEFT_PATH} fill={colors.logoShadow} />
|
|
</G>
|
|
<G transform={SHADOW_RIGHT_TRANSFORM}>
|
|
<Path d={RIGHT_PATH} fill={colors.logoShadow} />
|
|
</G>
|
|
</G>
|
|
<G transform={MAIN_TRANSFORM}>
|
|
<Path d={LEFT_PATH} fill={mainFill} />
|
|
<Path d={RIGHT_PATH} fill={mainFill} />
|
|
</G>
|
|
</Svg>
|
|
);
|
|
}
|
|
|
|
export default AstraLogo;
|