Basic download implementation

src/components/Button.tsx

@@ -51,8 +51,8 @@ const Button = React.forwardRef<View, ButtonProps>(function Button(props, ref) {
         >
             {Icon && 
                 <Icon
-                    width={12}
-                    height={12}
+                    width={14}
+                    height={14}
                     fill={isPressed ? '#fff' : THEME_COLOR}
                     style={{ 
                         marginRight: 8,

src/components/DownloadIcon.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useTypedSelector } from 'store';
+import CloudIcon from 'assets/cloud.svg';
+import CloudExclamationMarkIcon from 'assets/cloud-exclamation-mark.svg';
+import InternalDriveIcon from 'assets/internal-drive.svg';
+import useDefaultStyles from './Colors';
+import { EntityId } from '@reduxjs/toolkit';
+import Svg, { Circle } from 'react-native-svg';
+
+interface DownloadIconProps {
+    trackId: EntityId;
+    size?: number;
+    fill?: string;
+}
+
+function DownloadIcon({ trackId, size = 16, fill }: DownloadIconProps) {
+    const defaultStyles = useDefaultStyles();
+    const entity = useTypedSelector((state) => state.downloads.entities[trackId]);
+    const iconFill = fill || defaultStyles.textHalfOpacity.color;
+
+
+    if (!entity) {
+        return (
+            <CloudIcon width={size} height={size} fill={iconFill} />
+        );
+    }
+
+    const { isComplete, isFailed, progress } = entity;
+
+    if (isComplete) {
+        return (
+            <InternalDriveIcon width={size} height={size} fill={iconFill} />
+        );
+    }
+
+    if (isFailed) {
+        return (
+            <CloudExclamationMarkIcon width={size} height={size} fill={iconFill} />
+        );
+    }
+
+    if (!isComplete && !isFailed) {
+        const radius = size / 2;
+        const circumference = radius * 2 * Math.PI;
+
+        return (
+            <Svg width={size} height={size} transform={[{ rotate: '-90deg' }]}>
+                <Circle
+                    cx={radius}
+                    cy={radius}
+                    r={radius - 1}
+                    stroke={iconFill}
+                    strokeWidth={1.5}
+                    strokeDasharray={[ circumference, circumference ]}
+                    strokeDashoffset={circumference * (1 - progress)}
+                    strokeLinecap='round'
+                    fill='transparent'
+                />
+            </Svg>
+        );
+    }
+
+    return null;
+}
+
+export default DownloadIcon;