feat: refine creation and registration flows

2026-07-30 09:42:12 +02:00
parent 3fff09ba81
commit 761f3cc200
39 changed files with 1444 additions and 1239 deletions
@@ -0,0 +1,92 @@
+import { Image as ExpoImage } from 'expo-image'
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { img } from '../assets'
+import { FONT_FAMILY } from '../styles/Fonts'
+
+const MusiclandPlaybackCover = ({
+  artistName,
+  profilePictureURL,
+  coverUrl,
+  style,
+}) => {
+  const displayName =
+    typeof artistName === 'string' && artistName.trim() ? artistName.trim() : 'MusicLand'
+
+  return (
+    <View style={[styles.container, style]}>
+      <ExpoImage
+        source={coverUrl ? { uri: coverUrl } : img.musiclandPlaybackCover}
+        contentFit="cover"
+        cachePolicy="memory-disk"
+        priority="high"
+        style={StyleSheet.absoluteFillObject}
+      />
+      {!coverUrl && profilePictureURL ? (
+        <ExpoImage
+          source={{ uri: profilePictureURL }}
+          contentFit="cover"
+          cachePolicy="memory-disk"
+          style={styles.profilePicture}
+        />
+      ) : null}
+      {!coverUrl ? (
+        <>
+          <Text
+            adjustsFontSizeToFit
+            minimumFontScale={0.55}
+            numberOfLines={1}
+            style={styles.artistName}
+          >
+            {displayName}
+          </Text>
+          <Text style={styles.playbacker}>PLAYBACKER</Text>
+        </>
+      ) : null}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    aspectRatio: 1,
+    borderRadius: 20,
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  profilePicture: {
+    position: 'absolute',
+    width: '22.3%',
+    aspectRatio: 1,
+    left: '38.85%',
+    top: '44.3%',
+    borderRadius: 999,
+  },
+  artistName: {
+    position: 'absolute',
+    top: '76.5%',
+    left: '16%',
+    width: '68%',
+    color: '#FFFFFF',
+    fontFamily: FONT_FAMILY.InterRegular,
+    fontSize: 21,
+    lineHeight: 26,
+    letterSpacing: 1.2,
+    textAlign: 'center',
+  },
+  playbacker: {
+    position: 'absolute',
+    bottom: '3%',
+    left: '10%',
+    width: '80%',
+    color: '#FFFFFF',
+    fontFamily: FONT_FAMILY.InterRegular,
+    fontSize: 20,
+    lineHeight: 25,
+    letterSpacing: 1.4,
+    textAlign: 'center',
+  },
+})
+
+export default React.memo(MusiclandPlaybackCover)