diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts index b6b8ebea66c..7a8a1fb440d 100644 --- a/packages/common/src/index.ts +++ b/packages/common/src/index.ts @@ -8,3 +8,4 @@ export * from './hooks' export * from './store' export * from './schemas' export * from './assets' +export * from './messages' diff --git a/packages/common/src/messages/index.ts b/packages/common/src/messages/index.ts new file mode 100644 index 00000000000..cc55ea8e6bb --- /dev/null +++ b/packages/common/src/messages/index.ts @@ -0,0 +1,2 @@ +export * from './sign-on/socialMediaMessages' +export * from './sign-on/pages' diff --git a/packages/common/src/messages/sign-on/pages.ts b/packages/common/src/messages/sign-on/pages.ts new file mode 100644 index 00000000000..69530d19078 --- /dev/null +++ b/packages/common/src/messages/sign-on/pages.ts @@ -0,0 +1,17 @@ +export const createEmailPageMessages = { + title: 'Sign Up For Audius', + emailLabel: 'Email', + signUp: 'Sign Up Free', + haveAccount: 'Already have an account?', + signIn: 'Sign In', + subHeader: { + // Two separate lines separated by a divider. Can't include the divider here since its different for native vs web + line1: 'Join the revolution in music streaming!', + line2: 'Discover, connect, and create on Audius.' + }, + socialsDividerText: 'Or, get started with one of your socials', + unknownError: 'Unknown error occurred.', + metaMaskNotRecommended: 'Signing up with MetaMask is not recommended.', + signUpMetamask: 'Sign Up With MetaMask', + learnMore: 'Learn More' +} diff --git a/packages/web/src/pages/sign-up-page/utils/socialMediaMessages.ts b/packages/common/src/messages/sign-on/socialMediaMessages.ts similarity index 100% rename from packages/web/src/pages/sign-up-page/utils/socialMediaMessages.ts rename to packages/common/src/messages/sign-on/socialMediaMessages.ts diff --git a/packages/common/src/schemas/index.ts b/packages/common/src/schemas/index.ts index 967ff509d0a..4274f21bc00 100644 --- a/packages/common/src/schemas/index.ts +++ b/packages/common/src/schemas/index.ts @@ -1,149 +1,2 @@ -// TODO(nkang) - convert to TS -// @ts-nocheck -import { pick } from 'lodash' - -const trackMetadataSchema = { - track_cid: null, - owner_id: null, - title: null, - duration: null, - length: null, - cover_art: null, - cover_art_sizes: null, - tags: null, - genre: null, - mood: null, - credits_splits: null, - created_at: null, - // TODO: CREATE DATE IS REQUIRED, BUT THIS FIELD IS NEVER USED. - create_date: null, - updated_at: null, - release_date: null, - file_type: null, - track_segments: [], - has_current_user_reposted: false, - followee_reposts: null, - followee_saves: null, - is_current: true, - is_unlisted: false, - is_premium: false, - premium_conditions: null, - preview_start_seconds: null, - audio_upload_id: null, - field_visibility: { - genre: true, - mood: true, - tags: true, - share: false, - play_count: false, - remixes: true - }, - remix_of: null, - repost_count: 0, - save_count: 0, - description: null, - license: null, - isrc: null, - iswc: null, - download: null, - is_playlist_upload: false, - ai_attribution_user_id: null -} - -export const newTrackMetadata = (fields, validate = false): TrackMetadata => { - const validFields = validate - ? pick(fields, Object.keys(trackMetadataSchema).concat(['track_id'])) - : fields - const remixParentTrackId = fields?.remix_of?.tracks?.[0]?.parent_track_id - return { - ...trackMetadataSchema, - track_segments: [...trackMetadataSchema.track_segments], - followee_reposts: [...(trackMetadataSchema.followee_reposts || [])], - followee_saves: [...(trackMetadataSchema.followee_saves || [])], - ...validFields, - // Reformat remixes last so we don't carry through any extra metadata that - // was part of the remix_of response from backends - remix_of: remixParentTrackId - ? createRemixOfMetadata({ parentTrackId: remixParentTrackId }) - : null - } -} - -const collectionMetadataSchema = { - is_album: false, - is_current: true, - is_private: true, - tags: null, - genre: null, - mood: null, - created_at: null, - updated_at: null, - cover_art: null, - cover_art_sizes: null, - playlist_name: '', - playlist_owner_id: null, - save_count: null, - license: null, - upc: null, - description: null -} - -export const newCollectionMetadata = (fields?: any, validate = false) => { - const validFields = validate - ? pick( - fields, - Object.keys(collectionMetadataSchema).concat(['playlist_id']) - ) - : fields - return { - ...collectionMetadataSchema, - ...validFields - } -} - -const userMetadataSchema = { - allow_ai_attribution: false, - wallet: '', - name: null, - handle: '', - profile_picture: null, - profile_picture_sizes: null, - cover_photo_sizes: null, - cover_photo: null, - bio: null, - location: null, - is_verified: false, - creator_node_endpoint: null, - updated_at: null, - associated_wallets: null, - associated_sol_wallets: null, - collectibles: null, - playlist_library: null, - events: null, - is_deactivated: false, - artist_pick_track_id: null -} - -export const newUserMetadata = (fields?: any, validate = false): User => { - const validFields = validate - ? pick(fields, Object.keys(userMetadataSchema).concat(['user_id'])) - : fields - return { - ...userMetadataSchema, - ...validFields - } -} - -export const createRemixOfMetadata = ({ - parentTrackId -}: { - parentTrackId: number -}) => { - return { - tracks: [ - { - parent_track_id: parentTrackId - } - ] - } -} +export * from './metadata' +export * from './sign-on/emailSchema' diff --git a/packages/common/src/schemas/metadata.ts b/packages/common/src/schemas/metadata.ts new file mode 100644 index 00000000000..13fc3b05c5e --- /dev/null +++ b/packages/common/src/schemas/metadata.ts @@ -0,0 +1,150 @@ +// TODO(nkang) - convert to TS +// @ts-nocheck + +import { pick } from 'lodash' + +const trackMetadataSchema = { + track_cid: null, + owner_id: null, + title: null, + duration: null, + length: null, + cover_art: null, + cover_art_sizes: null, + tags: null, + genre: null, + mood: null, + credits_splits: null, + created_at: null, + // TODO: CREATE DATE IS REQUIRED, BUT THIS FIELD IS NEVER USED. + create_date: null, + updated_at: null, + release_date: null, + file_type: null, + track_segments: [], + has_current_user_reposted: false, + followee_reposts: null, + followee_saves: null, + is_current: true, + is_unlisted: false, + is_premium: false, + premium_conditions: null, + preview_start_seconds: null, + audio_upload_id: null, + field_visibility: { + genre: true, + mood: true, + tags: true, + share: false, + play_count: false, + remixes: true + }, + remix_of: null, + repost_count: 0, + save_count: 0, + description: null, + license: null, + isrc: null, + iswc: null, + download: null, + is_playlist_upload: false, + ai_attribution_user_id: null +} + +export const newTrackMetadata = (fields, validate = false): TrackMetadata => { + const validFields = validate + ? pick(fields, Object.keys(trackMetadataSchema).concat(['track_id'])) + : fields + const remixParentTrackId = fields?.remix_of?.tracks?.[0]?.parent_track_id + return { + ...trackMetadataSchema, + track_segments: [...trackMetadataSchema.track_segments], + followee_reposts: [...(trackMetadataSchema.followee_reposts || [])], + followee_saves: [...(trackMetadataSchema.followee_saves || [])], + ...validFields, + // Reformat remixes last so we don't carry through any extra metadata that + // was part of the remix_of response from backends + remix_of: remixParentTrackId + ? createRemixOfMetadata({ parentTrackId: remixParentTrackId }) + : null + } +} + +const collectionMetadataSchema = { + is_album: false, + is_current: true, + is_private: true, + tags: null, + genre: null, + mood: null, + created_at: null, + updated_at: null, + cover_art: null, + cover_art_sizes: null, + playlist_name: '', + playlist_owner_id: null, + save_count: null, + license: null, + upc: null, + description: null +} + +export const newCollectionMetadata = (fields?: any, validate = false) => { + const validFields = validate + ? pick( + fields, + Object.keys(collectionMetadataSchema).concat(['playlist_id']) + ) + : fields + return { + ...collectionMetadataSchema, + ...validFields + } +} + +const userMetadataSchema = { + allow_ai_attribution: false, + wallet: '', + name: null, + handle: '', + profile_picture: null, + profile_picture_sizes: null, + cover_photo_sizes: null, + cover_photo: null, + bio: null, + location: null, + is_verified: false, + creator_node_endpoint: null, + updated_at: null, + associated_wallets: null, + associated_sol_wallets: null, + collectibles: null, + playlist_library: null, + events: null, + is_deactivated: false, + artist_pick_track_id: null +} + +export const newUserMetadata = (fields?: any, validate = false): User => { + const validFields = validate + ? pick(fields, Object.keys(userMetadataSchema).concat(['user_id'])) + : fields + return { + ...userMetadataSchema, + ...validFields + } +} + +export const createRemixOfMetadata = ({ + parentTrackId +}: { + parentTrackId: number +}) => { + return { + tracks: [ + { + parent_track_id: parentTrackId + } + ] + } +} diff --git a/packages/common/src/schemas/sign-on/emailSchema.ts b/packages/common/src/schemas/sign-on/emailSchema.ts new file mode 100644 index 00000000000..754358af35b --- /dev/null +++ b/packages/common/src/schemas/sign-on/emailSchema.ts @@ -0,0 +1,25 @@ +import { z } from 'zod' + +import { AudiusQueryContextType } from 'audius-query' +import { signUpFetch } from 'src/api' +import { EMAIL_REGEX } from 'utils/email' + +export const emailSchemaMessages = { + invalidEmail: 'Please enter a valid email.', + emailInUse: 'Email already taken.' +} + +export const emailSchema = ( + queryContext: T +) => + z.object({ + email: z + .string({ required_error: emailSchemaMessages.invalidEmail }) + .regex(EMAIL_REGEX, { message: emailSchemaMessages.invalidEmail }) + .refine( + async (email) => { + return !(await signUpFetch.isEmailInUse({ email }, queryContext)) + }, + { message: emailSchemaMessages.emailInUse } + ) + }) diff --git a/packages/web/src/utils/email.ts b/packages/common/src/utils/email.ts similarity index 100% rename from packages/web/src/utils/email.ts rename to packages/common/src/utils/email.ts diff --git a/packages/common/src/utils/index.ts b/packages/common/src/utils/index.ts index d82094faa03..3a150fd88de 100644 --- a/packages/common/src/utils/index.ts +++ b/packages/common/src/utils/index.ts @@ -36,3 +36,4 @@ export { default as dayjs } from './dayjs' export { Dayjs } from './dayjs' export * from './promiseWithTimeout' export * from './handleReservedStatus' +export * from './email' diff --git a/packages/mobile/src/harmony-native/components/index.ts b/packages/mobile/src/harmony-native/components/index.ts index 9378deb14ef..f9db4c88530 100644 --- a/packages/mobile/src/harmony-native/components/index.ts +++ b/packages/mobile/src/harmony-native/components/index.ts @@ -1 +1,2 @@ export * from './Link' +export * from './layout' diff --git a/packages/mobile/src/harmony-native/components/layout/index.ts b/packages/mobile/src/harmony-native/components/layout/index.ts new file mode 100644 index 00000000000..b2fdb0fbc8d --- /dev/null +++ b/packages/mobile/src/harmony-native/components/layout/index.ts @@ -0,0 +1,6 @@ +export * from './Box/Box' +export * from './Box/types' +export * from './Flex/Flex' +export * from './Flex/types' +export * from './Paper/Paper' +export * from './Paper/types' diff --git a/packages/mobile/src/harmony-native/foundations/color/semantic.ts b/packages/mobile/src/harmony-native/foundations/color/semantic.ts index 858c4137830..c984060cd22 100644 --- a/packages/mobile/src/harmony-native/foundations/color/semantic.ts +++ b/packages/mobile/src/harmony-native/foundations/color/semantic.ts @@ -9,6 +9,7 @@ export type SemanticColors = { default: string subdued: string disabled: string + staticWhite: string } background: { default: string @@ -34,7 +35,8 @@ export const semanticTheme: Record = { heading: primitiveTheme.day.special.gradient, default: primitiveTheme.day.neutral.neutral, subdued: primitiveTheme.day.neutral['n-400'], - disabled: primitiveTheme.day.neutral['n-150'] + disabled: primitiveTheme.day.neutral['n-150'], + staticWhite: primitiveTheme.day.special.white }, background: { default: primitiveTheme.day.special.background, @@ -58,7 +60,8 @@ export const semanticTheme: Record = { heading: primitiveTheme.dark.special.gradient, default: primitiveTheme.dark.neutral.neutral, subdued: primitiveTheme.dark.neutral['n-400'], - disabled: primitiveTheme.dark.neutral['n-150'] + disabled: primitiveTheme.dark.neutral['n-150'], + staticWhite: primitiveTheme.dark.special.white }, background: { default: primitiveTheme.dark.special.background, @@ -82,7 +85,8 @@ export const semanticTheme: Record = { heading: primitiveTheme.matrix.special.gradient, default: primitiveTheme.matrix.neutral.neutral, subdued: primitiveTheme.matrix.neutral['n-400'], - disabled: primitiveTheme.matrix.neutral['n-150'] + disabled: primitiveTheme.matrix.neutral['n-150'], + staticWhite: primitiveTheme.matrix.special.white }, background: { default: primitiveTheme.matrix.special.background, diff --git a/packages/mobile/src/screens/sign-in-screen/SignInScreen.tsx b/packages/mobile/src/screens/sign-in-screen/SignInScreen.tsx index 4c5e9519b26..171a07a9188 100644 --- a/packages/mobile/src/screens/sign-in-screen/SignInScreen.tsx +++ b/packages/mobile/src/screens/sign-in-screen/SignInScreen.tsx @@ -5,6 +5,7 @@ import { Formik } from 'formik' import { View } from 'react-native' import { useDispatch } from 'react-redux' +import { Link } from '@audius/harmony-native' import IconArrow from 'app/assets/images/iconArrow.svg' import { Button, Text } from 'app/components/core' import { TextField } from 'app/components/fields' @@ -50,6 +51,9 @@ export const SignInScreen = () => { icon={IconArrow} onPress={() => handleSubmit()} /> + + Create Account + )} diff --git a/packages/mobile/src/screens/sign-up-screen/SignUpRootScreen.tsx b/packages/mobile/src/screens/sign-up-screen/SignUpRootScreen.tsx index d9ce2435cf5..a447aaeccc5 100644 --- a/packages/mobile/src/screens/sign-up-screen/SignUpRootScreen.tsx +++ b/packages/mobile/src/screens/sign-up-screen/SignUpRootScreen.tsx @@ -1,11 +1,11 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack' +import { CreateEmailScreen } from './screens/CreateEmailScreen' import { CreatePasswordScreen } from './screens/CreatePasswordScreen' import { FinishProfileScreen } from './screens/FinishProfileScreen' import { PickHandleScreen } from './screens/PickHandleScreen' import { SelectArtistsScreen } from './screens/SelectArtistsScreen' import { SelectGenreScreen } from './screens/SelectGenreScreen' -import { SignUpScreen } from './screens/SignUpScreen' const Stack = createNativeStackNavigator() const screenOptions = { animationTypeForReplace: 'pop' as const } @@ -13,7 +13,7 @@ const screenOptions = { animationTypeForReplace: 'pop' as const } export const SignUpRootScreen = () => { return ( - + diff --git a/packages/mobile/src/screens/sign-up-screen/components/AudiusValues.tsx b/packages/mobile/src/screens/sign-up-screen/components/AudiusValues.tsx new file mode 100644 index 00000000000..1eb3e842bd9 --- /dev/null +++ b/packages/mobile/src/screens/sign-up-screen/components/AudiusValues.tsx @@ -0,0 +1,56 @@ +import type { SvgProps } from 'react-native-svg' + +import type { NativeFlexProps } from '@audius/harmony-native' +import { Flex, Text } from '@audius/harmony-native' + +import IconCloudUpload from './temp-harmony/iconCloudArrowUp.svg' +import IconHeadphones from './temp-harmony/iconHeadphones.svg' +import IconMessage from './temp-harmony/iconMessages.svg' + +const messages = { + heading: 'Your Music, Your Way', + unlimitedStreaming: 'Unlimited Streaming & Uploads', + directMessages: 'Message & Connect With Fans', + adFree: 'Ad-Free, Offline Listening' +} + +type IconComponent = React.FC< + SvgProps & { + fillSecondary?: string | undefined + } +> + +type AudiusValueProps = { icon: IconComponent; text: string } + +/** + * Each individual audius value text + icon row + */ +const AudiusValue = (props: AudiusValueProps) => { + const { icon: Icon, text } = props + return ( + + + + {text} + + + ) +} + +/** + * Renders all the audius values + */ + +type AudiusValuesProps = { + className?: string +} & NativeFlexProps + +export const AudiusValues = (props: AudiusValuesProps) => { + return ( + + + + + + ) +} diff --git a/packages/mobile/src/screens/sign-up-screen/components/SocialMediaLoginOptions.tsx b/packages/mobile/src/screens/sign-up-screen/components/SocialMediaLoginOptions.tsx new file mode 100644 index 00000000000..420883ef422 --- /dev/null +++ b/packages/mobile/src/screens/sign-up-screen/components/SocialMediaLoginOptions.tsx @@ -0,0 +1,65 @@ +import { socialMediaMessages } from '@audius/common' +import { css } from '@emotion/native' + +import { Flex } from '@audius/harmony-native' + +import { SocialButton } from './temp-harmony/SocialButton' + +type SocialMediaLoginOptionsProps = { + onCompleteSocialMediaLogin?: (info: { + requiresReview: boolean + handle: string + platform: 'twitter' | 'instagram' | 'tiktok' + }) => void +} + +export const SocialMediaLoginOptions = ({ + onCompleteSocialMediaLogin +}: SocialMediaLoginOptionsProps) => { + const isTwitterEnabled = true + const isInstagramEnabled = true + const isTikTokEnabled = true + // const isTwitterEnabled = useRemoteVar( + // BooleanKeys.DISPLAY_TWITTER_VERIFICATION_WEB_AND_DESKTOP + // ) + // const isInstagramEnabled = useRemoteVar( + // BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION_WEB_AND_DESKTOP + // ) + // const isTikTokEnabled = useRemoteVar( + // BooleanKeys.DISPLAY_TIKTOK_VERIFICATION_WEB_AND_DESKTOP + // ) + return ( + + {isTwitterEnabled ? ( + // TODO: replace with harmony component + {}} + accessibilityLabel={socialMediaMessages.signUpTwitter} + style={css({ flex: 1 })} + /> + ) : null} + {isInstagramEnabled ? ( + // TODO: replace with harmony component + {}} + accessibilityLabel={socialMediaMessages.signUpInstagram} + style={css({ flex: 1 })} + /> + ) : null} + {isTikTokEnabled ? ( + // TODO: replace with harmony component + {}} + accessibilityLabel={socialMediaMessages.signUpTikTok} + style={css({ flex: 1 })} + /> + ) : null} + + ) +} diff --git a/packages/mobile/src/screens/sign-up-screen/components/layout.tsx b/packages/mobile/src/screens/sign-up-screen/components/layout.tsx new file mode 100644 index 00000000000..823522b1dd6 --- /dev/null +++ b/packages/mobile/src/screens/sign-up-screen/components/layout.tsx @@ -0,0 +1,74 @@ +import { Children } from 'react' + +import { type NativeBoxProps } from '@audius/harmony-native' +import { Flex } from 'app/harmony-native/components/layout/Flex/Flex' +import type { NativeFlexProps } from 'app/harmony-native/components/layout/Flex/types' +import { Text } from 'app/harmony-native/foundations/typography/Text' + +type PageProps = NativeFlexProps & { + centered?: boolean +} + +export const Page = (props: PageProps) => { + const { centered, children, ...other } = props + + const childrenArray = Children.toArray(children) + const footer = childrenArray.pop() + + const layoutProps: NativeFlexProps = { + direction: 'column', + h: '100%', + gap: '2xl', + ph: 'l', + pv: '2xl' + } + + if (centered) { + return ( + + + {childrenArray} + + {footer} + + ) + } + + return ( + + {children} + + ) +} + +type HeadingProps = { + prefix?: any + postfix?: any + heading: any + description?: any + centered?: boolean +} & Omit + +export const Heading = (props: HeadingProps) => { + const { prefix, heading, description, postfix, centered, ...other } = props + + return ( + + {prefix} + + {heading} + + {description ? ( + + {description} + + ) : undefined} + {postfix} + + ) +} diff --git a/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/AudiusLogoH.png b/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/AudiusLogoH.png new file mode 100644 index 00000000000..7da913b3ef6 Binary files /dev/null and b/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/AudiusLogoH.png differ diff --git a/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/Divider.tsx b/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/Divider.tsx new file mode 100644 index 00000000000..533e2de35a3 --- /dev/null +++ b/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/Divider.tsx @@ -0,0 +1,18 @@ +import { css } from '@emotion/native' +import { View } from 'react-native' + +import { Box, Flex, type NativeFlexProps } from '@audius/harmony-native' + +type DividerProps = NativeFlexProps + +// TODO: temporary component until harmony divider exists +export const Divider = (props: DividerProps) => { + const { children, ...rest } = props + return ( + + + {children} + + + ) +} diff --git a/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/Hint.tsx b/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/Hint.tsx new file mode 100644 index 00000000000..2c87ed8aa22 --- /dev/null +++ b/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/Hint.tsx @@ -0,0 +1,32 @@ +import type { PropsWithChildren } from 'react' + +import { css } from '@emotion/native' +import { useTheme } from '@emotion/react' + +import type { NativeFlexProps } from '@audius/harmony-native' +import { Box, Flex } from '@audius/harmony-native' + +export type HintProps = PropsWithChildren<{ icon?: any }> & NativeFlexProps + +export const Hint = ({ icon: Icon, children, ...rest }: HintProps) => { + const { color } = useTheme() + const hasIcon = !!Icon + return ( + + {hasIcon ? : null} + {children} + {hasIcon ? : null} + + ) +} diff --git a/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/IconAudiusLogoHorizontalColor.tsx b/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/IconAudiusLogoHorizontalColor.tsx new file mode 100644 index 00000000000..aaf928cc2fb --- /dev/null +++ b/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/IconAudiusLogoHorizontalColor.tsx @@ -0,0 +1,8 @@ +import type { ImageProps } from 'react-native' +import { Image } from 'react-native' + +import audiusLogoH from './AudiusLogoH.png' + +export const IconAudiusLogoHorizontalColor = (props: Partial) => { + return +} diff --git a/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/IconExclamation.svg b/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/IconExclamation.svg new file mode 100644 index 00000000000..95d0b677ca8 --- /dev/null +++ b/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/IconExclamation.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/SocialButton.tsx b/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/SocialButton.tsx new file mode 100644 index 00000000000..c2a6f46b3ce --- /dev/null +++ b/packages/mobile/src/screens/sign-up-screen/components/temp-harmony/SocialButton.tsx @@ -0,0 +1,62 @@ +import IconInstagram from 'app/assets/images/iconInstagram.svg' +import IconTikTok from 'app/assets/images/iconTikTokInverted.svg' +import IconTwitter from 'app/assets/images/iconTwitterBird.svg' +import { Button, type ButtonProps } from 'app/components/core' + +type SocialMedia = 'tiktok' | 'instagram' | 'twitter' + +// Omitting aria-label from original type purely for showing in Storybook +export type SocialButtonProps = Partial & { + /** + * Which social media. + */ + socialType: SocialMedia + accessibilityLabel?: string +} + +const getButtonLogo = (type: SocialMedia) => { + switch (type) { + case 'instagram': + return IconInstagram + case 'tiktok': + return IconTikTok + case 'twitter': + return IconTwitter + default: + return undefined + } +} + +const getSocialButtonProps = ( + type: SocialMedia +): Partial => { + switch (type) { + case 'tiktok': + return { color: '#fe2c55' } + case 'twitter': + return { color: '#1ba1f1' } + default: + return { + // TODO: native-ify this gradient + // background: `radial-gradient(61.46% 59.09% at 36.25% 96.55%, #ffd600 0%, #ff6930 48.44%, #fe3b36 73.44%, rgba(254, 59, 54, 0) 100%), + // radial-gradient(202.83% 136.37% at 84.5% 113.5%, #ff1b90 24.39%, #f80261 43.67%, #ed00c0 68.85%, #c500e9 77.68%, #7017ff 89.32%)` + // temp + color: '#f40281' + } + } +} + +export const SocialButton = (props: SocialButtonProps) => { + const { socialType, accessibilityLabel, ...rest } = props + const socialButtonProps = getSocialButtonProps(socialType) + + return ( +