add profile create action to landing

permaweb · Jun 25, 2024 · 118271e · 118271e
1 parent 50a9857
commit 118271e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 10 deletions.
diff --git a/src/views/Landing/Profile/Profile.tsx b/src/views/Landing/Profile/Profile.tsx
@@ -141,16 +141,31 @@ export default function Profile(props: { address: string }) {
 								/>
 							</S.HeaderActions>
 						</S.HeaderInfo>
-						{fullProfile.id && (
-							<S.Body>
-								<S.TWrapper>
-									<AssetsTable useIdAction={false} />
-								</S.TWrapper>
-								<S.TWrapper>
-									<CollectionsTable />
-								</S.TWrapper>
-							</S.Body>
-						)}
+						<S.Body>
+							{fullProfile && fullProfile.id ? (
+								<>
+									<S.TWrapper>
+										<AssetsTable useIdAction={false} />
+									</S.TWrapper>
+									<S.TWrapper>
+										<CollectionsTable />
+									</S.TWrapper>
+								</>
+							) : (
+								<S.CreateWrapper>
+									<Button
+										type={'alt1'}
+										label={arProvider.profile && arProvider.profile.id ? language.editProfile : language.createProfile}
+										handlePress={() => setShowManage(true)}
+										disabled={!arProvider.walletAddress}
+										icon={ASSETS.user}
+										height={55}
+										width={450}
+										iconLeftAlign
+									/>
+								</S.CreateWrapper>
+							)}
+						</S.Body>
 					</S.Wrapper>
 					{showManage && (
 						<Modal

diff --git a/src/views/Landing/Profile/styles.ts b/src/views/Landing/Profile/styles.ts
@@ -188,6 +188,26 @@ export const Body = styled.div`
 	margin: 60px 0 0 0;
 `;
 
+export const CreateWrapper = styled.div`
+	width: fit-content;
+	margin: 0 auto;
+	button {
+		width: 300px !important;
+		max-width: 100% !important;
+		span {
+			color: ${(props) => props.theme.colors.font.primary} !important;
+			font-size: ${(props) => props.theme.typography.size.lg} !important;
+			font-weight: ${(props) => props.theme.typography.weight.bold} !important;
+			font-family: ${(props) => props.theme.typography.family.alt1} !important;
+		}
+		svg {
+			height: 22.5px !important;
+			width: 22.5px !important;
+			padding: 4.5px 0 0 0;
+		}
+	}
+`;
+
 export const TWrapper = styled.div`
 	flex-grow: 1;
 	width: 550px;