Skip to content

Commit d840cd0

Browse files
SaerisSaeris
committed
⚡️ Fix Compilation Bugs, Add Layout + Footer to Common
1 parent 8eae41e commit d840cd0

File tree

18 files changed

+389
-1601
lines changed

18 files changed

+389
-1601
lines changed

‎packages/app/src/app/pages/Profile/Profile.tsx‎

Lines changed: 59 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import React, { useState } from 'react';
22
import { RouteComponentProps } from '@reach/router';
33
import {
4-
Main,
5-
PageContent,
6-
Navigation,
4+
Layout,
75
Pagination,
86
SearchInput,
97
} from '@codesandbox/common/lib/components';
@@ -41,71 +39,68 @@ export const Profile: React.FC<RouteComponentProps> = () => {
4139
// - Add drag and drop support for grids
4240

4341
return (
44-
<Main>
45-
<Navigation />
46-
<PageContent>
47-
<Content>
48-
<UserInfo
49-
canEdit
50-
isEditing={isEditing}
51-
toggleEditing={() => setIsEditing(!isEditing)}
52-
onEdit={({ bio, socialLinks }) => {
53-
setData({
54-
...data,
55-
user: {
56-
...data.user,
57-
bio,
58-
socialLinks,
59-
},
60-
});
61-
}}
62-
{...data.user}
63-
/>
64-
{data.user.featured && <FeaturedSandbox {...data.user.featured} />}
65-
<SearchRow>
66-
<SearchInput />
67-
<SandboxCount>
68-
<em>{data.user.totalSandboxes}</em>
69-
Sandboxes
70-
</SandboxCount>
71-
</SearchRow>
72-
{isEditing && !data.user.pinned.length ? (
73-
<PinnedPlaceholder>
74-
Drag your Sandbox here to pin them to your profile
75-
</PinnedPlaceholder>
76-
) : isEditing && data.user.pinned.length ? (
42+
<Layout>
43+
<Content>
44+
<UserInfo
45+
canEdit
46+
isEditing={isEditing}
47+
toggleEditing={() => setIsEditing(!isEditing)}
48+
onEdit={({ bio, socialLinks }) => {
49+
setData({
50+
...data,
51+
user: {
52+
...data.user,
53+
bio,
54+
socialLinks,
55+
},
56+
});
57+
}}
58+
{...data.user}
59+
/>
60+
{data.user.featured && <FeaturedSandbox {...data.user.featured} />}
61+
<SearchRow>
62+
<SearchInput />
63+
<SandboxCount>
64+
<em>{data.user.totalSandboxes}</em>
65+
Sandboxes
66+
</SandboxCount>
67+
</SearchRow>
68+
{isEditing && !data.user.pinned.length ? (
69+
<PinnedPlaceholder>
70+
Drag your Sandbox here to pin them to your profile
71+
</PinnedPlaceholder>
72+
) : isEditing && data.user.pinned.length ? (
73+
<PinnedGrid>
74+
{data.user.pinned.map(sandbox => (
75+
<ShowcaseCard key={sandbox.id} {...sandbox} />
76+
))}
77+
<DropPlaceholder>Drag Sandbox to pin</DropPlaceholder>
78+
</PinnedGrid>
79+
) : (
80+
data.user.pinned && (
7781
<PinnedGrid>
7882
{data.user.pinned.map(sandbox => (
7983
<ShowcaseCard key={sandbox.id} {...sandbox} />
8084
))}
81-
<DropPlaceholder>Drag Sandbox to pin</DropPlaceholder>
8285
</PinnedGrid>
83-
) : (
84-
data.user.pinned && (
85-
<PinnedGrid>
86-
{data.user.pinned.map(sandbox => (
87-
<ShowcaseCard key={sandbox.id} {...sandbox} />
88-
))}
89-
</PinnedGrid>
90-
)
91-
)}
92-
{data.user.sandboxes && (
93-
<>
94-
<TitleRow>
95-
<SectionTitle>All Sandboxes</SectionTitle>
96-
</TitleRow>
97-
<ShowcaseGrid>
98-
{data.user.sandboxes.map(sandbox => (
99-
<ShowcaseCard key={sandbox.id} {...sandbox} />
100-
))}
101-
</ShowcaseGrid>
102-
<PageNav>
103-
<Pagination pages={10} />
104-
</PageNav>
105-
</>
106-
)}
107-
</Content>
108-
</PageContent>
109-
</Main>
86+
)
87+
)}
88+
{data.user.sandboxes && (
89+
<>
90+
<TitleRow>
91+
<SectionTitle>All Sandboxes</SectionTitle>
92+
</TitleRow>
93+
<ShowcaseGrid>
94+
{data.user.sandboxes.map(sandbox => (
95+
<ShowcaseCard key={sandbox.id} {...sandbox} />
96+
))}
97+
</ShowcaseGrid>
98+
<PageNav>
99+
<Pagination pages={10} />
100+
</PageNav>
101+
</>
102+
)}
103+
</Content>
104+
</Layout>
110105
);
111106
};

‎packages/app/src/app/pages/Profile/ShowcaseCard/ShowcaseCard.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from 'react';
22
import { LightIcons } from '@codesandbox/template-icons';
3-
import { GoHeart, GoEye, GoRepoForked } from 'react-icons/go';
4-
import { MdMoreHoriz } from 'react-icons/md';
3+
import GoHeart from 'react-icons/go/heart';
4+
import GoEye from 'react-icons/go/eye';
5+
import GoRepoForked from 'react-icons/go/repo-forked';
6+
import MdMoreHoriz from 'react-icons/md/more-horiz';
57
import { Link, MenuItem, Separator } from '@codesandbox/common/lib/components';
68
import { abbreviateNumber } from './abbreviateNumber';
79
import {

‎packages/app/src/app/pages/Profile/UserInfo/Icons.tsx‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
import React from 'react';
2-
import {
3-
FaAngellist,
4-
FaFacebookSquare,
5-
FaTwitter,
6-
FaInstagram,
7-
FaLinkedin,
8-
FaYoutube,
9-
FaTwitch,
10-
FaPatreon,
11-
FaDribbble,
12-
FaBehanceSquare,
13-
FaMedium,
14-
FaStackOverflow,
15-
FaGithub,
16-
FaGitlab,
17-
FaNpm,
18-
} from 'react-icons/fa';
19-
import { GoGlobe } from 'react-icons/go';
2+
import FaAngellist from 'react-icons/fa/angellist';
3+
import FaFacebookSquare from 'react-icons/fa/facebook-square';
4+
import FaTwitter from 'react-icons/fa/twitter';
5+
import FaInstagram from 'react-icons/fa/instagram';
6+
import FaLinkedin from 'react-icons/fa/linkedin';
7+
import FaYoutube from 'react-icons/fa/youtube';
8+
import FaTwitch from 'react-icons/fa/twitch';
9+
// import FaPatreon from 'react-icons/fa/patreon';
10+
import FaDribbble from 'react-icons/fa/dribbble';
11+
import FaBehanceSquare from 'react-icons/fa/behance-square';
12+
import FaMedium from 'react-icons/fa/medium';
13+
import FaStackOverflow from 'react-icons/fa/stack-overflow';
14+
import FaGithub from 'react-icons/fa/github';
15+
import FaGitlab from 'react-icons/fa/gitlab';
16+
// import FaNpm from 'react-icons/fa/npm';
17+
import GoGlobe from 'react-icons/go/globe';
2018

2119
export const Icons = {
2220
angellist: <FaAngellist />,
@@ -26,13 +24,13 @@ export const Icons = {
2624
linkedin: <FaLinkedin />,
2725
youtube: <FaYoutube />,
2826
twitch: <FaTwitch />,
29-
patreon: <FaPatreon />,
27+
// patreon: <FaPatreon />,
3028
dribbble: <FaDribbble />,
3129
behance: <FaBehanceSquare />,
3230
medium: <FaMedium />,
3331
stackoverflow: <FaStackOverflow />,
3432
github: <FaGithub />,
3533
gitlab: <FaGitlab />,
36-
npm: <FaNpm />,
34+
// npm: <FaNpm />,
3735
web: <GoGlobe />,
3836
};

‎packages/app/src/app/pages/Profile/UserInfo/UserInfo.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
import { MdAdd, MdClose } from 'react-icons/md';
2+
import MdAdd from 'react-icons/md/add';
3+
import MdClose from 'react-icons/md/close';
34
import {
45
unstable_Form as Form,
56
unstable_useFormState as useFormState,

‎packages/app/src/app/pages/Profile/elements.ts‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,52 @@
1-
import styled, { css } from "styled-components"
2-
import { DropPlaceholder } from "./DropPlaceholder"
1+
import styled, { css } from 'styled-components';
2+
import { DropPlaceholder } from './DropPlaceholder';
33

44
export const Content = styled.div`
55
${({ theme }) => css`
66
display: grid;
77
grid-template-areas:
8-
"userinfo"
9-
"featured"
10-
"search"
11-
"pinned"
12-
"title"
13-
"showcase"
14-
"pagination";
8+
'userinfo'
9+
'featured'
10+
'search'
11+
'pinned'
12+
'title'
13+
'showcase'
14+
'pagination';
1515
grid-template-columns: 1fr;
1616
1717
${theme.media.greaterThan(theme.sizes.medium)} {
1818
grid-template-areas:
19-
"userinfo featured"
20-
"userinfo search"
21-
"userinfo pinned"
22-
"userinfo title"
23-
"userinfo showcase"
24-
"userinfo pagination";
19+
'userinfo featured'
20+
'userinfo search'
21+
'userinfo pinned'
22+
'userinfo title'
23+
'userinfo showcase'
24+
'userinfo pagination';
2525
grid-template-columns: 272px 1fr;
2626
}
2727
grid-gap: 1.75rem;
2828
width: 100%;
2929
max-width: 1280px;
30-
margin-bottom: 1.5rem;
3130
`}
32-
`
31+
`;
3332

3433
const row = css`
3534
display: flex;
3635
width: 100%;
37-
`
36+
`;
3837

3938
export const SearchRow = styled.div`
4039
${row}
4140
grid-area: search;
42-
`
41+
`;
4342

4443
export const FeaturedPlaceholder = styled(DropPlaceholder)`
4544
grid-area: featured;
46-
`
45+
`;
4746

4847
export const PinnedPlaceholder = styled(DropPlaceholder)`
4948
grid-area: pinned;
50-
`
49+
`;
5150

5251
export const SandboxCount = styled.div`
5352
flex: 0 0 auto;
@@ -65,38 +64,38 @@ export const SandboxCount = styled.div`
6564
color: #fff;
6665
font-style: normal;
6766
}
68-
`
67+
`;
6968

7069
const results = css`
7170
display: grid;
7271
grid-template-columns: repeat(auto-fit, minmax(305px, 1fr));
7372
grid-gap: 1.75rem;
7473
justify-content: space-between;
7574
width: 100%;
76-
`
75+
`;
7776

7877
export const PinnedGrid = styled.div`
7978
${results}
8079
grid-area: pinned;
81-
`
80+
`;
8281

8382
export const TitleRow = styled.div`
8483
${row}
8584
grid-area: title;
86-
`
85+
`;
8786

8887
export const SectionTitle = styled.h2`
8988
margin: 0;
9089
padding: 0;
9190
font-family: Inter;
9291
font-size: 29px;
9392
font-weight: 700;
94-
`
93+
`;
9594

9695
export const ShowcaseGrid = styled.div`
9796
${results}
9897
grid-area: showcase;
99-
`
98+
`;
10099

101100
export const PageNav = styled.div`
102101
grid-area: pagination;
@@ -105,4 +104,4 @@ export const PageNav = styled.div`
105104
width: 100%;
106105
margin-top: 1.75rem;
107106
margin-bottom: 1.75rem;
108-
`
107+
`;

‎packages/app/src/embed/theme/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import dot from 'dot-object';
22
import applicationTheme from '@codesandbox/common/lib/theme';
3-
import codesandboxBlack from '@codesandbox/common/lib/themes/codesandbox-black.json';
3+
import codesandboxBlack from '@codesandbox/common/lib/themes/codesandbox-black';
44
import codesandboxLight from '@codesandbox/common/lib/themes/codesandbox-light.json';
55
import tokens from './tokens';
66

0 commit comments

Comments
 (0)