Skip to content

Commit 3e7f2fa

Browse files
SaerisSaeris
committed
🚧 Add Profile Tabs, Fix onSubmit/onChange Behavior for SearchInput
1 parent d840cd0 commit 3e7f2fa

File tree

7 files changed

+421
-224
lines changed

7 files changed

+421
-224
lines changed

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

Lines changed: 167 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,168 @@
1+
const sandboxes = [
2+
{
3+
id: '123',
4+
preview: `https://i.imgur.com/NOzyPxz.png`,
5+
title: `wabisabi-js/isthereuber.in`,
6+
description: `Simple app to tell you where there is uber`,
7+
likes: 123456789,
8+
views: 999999,
9+
forks: 999999,
10+
environment: `React`,
11+
},
12+
{
13+
id: '456',
14+
preview: `https://i.imgur.com/u6kR235.png`,
15+
title: `Getting Started`,
16+
description: `Simple app to tell you where there is uber`,
17+
likes: 32,
18+
views: 122,
19+
forks: 234,
20+
environment: `React`,
21+
},
22+
{
23+
id: '789',
24+
preview: `https://i.imgur.com/a4KpNHf.png`,
25+
title: `Custom Properties`,
26+
description: `Simple app to tell you where there is uber`,
27+
likes: 32,
28+
views: 122,
29+
forks: 234,
30+
environment: `React`,
31+
},
32+
{
33+
id: '012',
34+
preview: `https://i.imgur.com/JpRs4Gm.png`,
35+
title: `wabisabi-js/isthereuber.in`,
36+
description: `Simple app to tell you where there is uber`,
37+
likes: 32,
38+
views: 122,
39+
forks: 234,
40+
environment: `React`,
41+
},
42+
{
43+
id: '345',
44+
preview: `https://i.imgur.com/6x1wrIJ.png`,
45+
title: `wabisabi-js/isthereuber.in`,
46+
description: `Simple app to tell you where there is uber`,
47+
likes: 32,
48+
views: 122,
49+
forks: 234,
50+
environment: `React`,
51+
},
52+
{
53+
id: '678',
54+
preview: `https://i.imgur.com/JxGN2TS.png`,
55+
title: `wabisabi-js/isthereuber.in`,
56+
description: `Simple app to tell you where there is uber`,
57+
likes: 32,
58+
views: 122,
59+
forks: 234,
60+
environment: `React`,
61+
},
62+
];
63+
164
export const initialState = {
2-
user: {
3-
id: `userID`,
4-
avatar: `https://avatars2.githubusercontent.com/u/42876?s=200&v=4`,
5-
isPro: false,
6-
isTeam: true,
7-
name: `Framer`,
8-
username: `Festina Lente`,
9-
bio: `Bring your creative ideas to life with Framer X, the best tool for interactive design. Create responsive layouts, design realistic prototypes, and bring everything closer to production—all in one place`,
10-
totalSandboxes: 450,
11-
associations: [
12-
{
13-
thumbnail: `https://avatars2.githubusercontent.com/u/10724744?s=96&v=4`,
14-
url: ``,
15-
entityName: `Stefan Mansson`
16-
},
17-
{
18-
thumbnail: `https://avatars3.githubusercontent.com/u/12829?s=96&v=4`,
19-
url: ``,
20-
entityName: `Eelco Lempsink`
21-
},
22-
{
23-
thumbnail: `https://avatars0.githubusercontent.com/u/39778?s=96&v=4`,
24-
url: ``,
25-
entityName: `Jordan Dobson`
26-
},
27-
{
28-
thumbnail: `https://avatars3.githubusercontent.com/u/206779?s=96&v=4`,
29-
url: ``,
30-
entityName: `Koen Bok`
31-
},
32-
{
33-
thumbnail: `https://avatars3.githubusercontent.com/u/28392?s=96&v=4`,
34-
url: ``,
35-
entityName: `Stefan Borsje`
36-
}
37-
],
38-
socialLinks: [
39-
`https://twitter.com/framer`,
40-
`https://www.framer.com/`,
41-
`https://github.com/framer`
42-
],
43-
featured: {
44-
id: "123",
45-
heroImage: `https://i.imgur.com/h2nQnqU.png`
46-
},
47-
pinned: [
48-
{
49-
id: "123",
50-
preview: `https://i.imgur.com/iy4AKF1.png`,
51-
title: `wabisabi-js/isthereuber.in`,
52-
description: `Simple app to tell you where there is uber`,
53-
likes: 999999,
54-
views: 999999,
55-
forks: 999999,
56-
environment: `React`
57-
},
58-
{
59-
id: "456",
60-
preview: `https://i.imgur.com/Kl4WYmI.png`,
61-
title: `wabisabi-js/isthereuber.in`,
62-
description: `Simple app to tell you where there is uber`,
63-
likes: 32,
64-
views: 122,
65-
forks: 234,
66-
environment: `React`
67-
},
68-
{
69-
id: "789",
70-
preview: `https://i.imgur.com/9xitUWN.png`,
71-
title: `wabisabi-js/isthereuber.in`,
72-
description: `Simple app to tell you where there is uber`,
73-
likes: 32,
74-
views: 122,
75-
forks: 234,
76-
environment: `React`
77-
},
78-
{
79-
id: "012",
80-
preview: `https://i.imgur.com/Ihb874i.png`,
81-
title: `wabisabi-js/isthereuber.in`,
82-
description: `Simple app to tell you where there is uber`,
83-
likes: 32,
84-
views: 122,
85-
forks: 234,
86-
environment: `React`
87-
},
88-
{
89-
id: "345",
90-
preview: `https://i.imgur.com/t3TVRY8.png`,
91-
title: `wabisabi-js/isthereuber.in`,
92-
description: `Simple app to tell you where there is uber`,
93-
likes: 32,
94-
views: 122,
95-
forks: 234,
96-
environment: `React`
97-
}
98-
],
99-
sandboxes: [
100-
{
101-
id: "123",
102-
preview: `https://i.imgur.com/NOzyPxz.png`,
103-
title: `wabisabi-js/isthereuber.in`,
104-
description: `Simple app to tell you where there is uber`,
105-
likes: 123456789,
106-
views: 999999,
107-
forks: 999999,
108-
environment: `React`
109-
},
110-
{
111-
id: "456",
112-
preview: `https://i.imgur.com/u6kR235.png`,
113-
title: `Getting Started`,
114-
description: `Simple app to tell you where there is uber`,
115-
likes: 32,
116-
views: 122,
117-
forks: 234,
118-
environment: `React`
119-
},
120-
{
121-
id: "789",
122-
preview: `https://i.imgur.com/a4KpNHf.png`,
123-
title: `Custom Properties`,
124-
description: `Simple app to tell you where there is uber`,
125-
likes: 32,
126-
views: 122,
127-
forks: 234,
128-
environment: `React`
129-
},
130-
{
131-
id: "012",
132-
preview: `https://i.imgur.com/JpRs4Gm.png`,
133-
title: `wabisabi-js/isthereuber.in`,
134-
description: `Simple app to tell you where there is uber`,
135-
likes: 32,
136-
views: 122,
137-
forks: 234,
138-
environment: `React`
139-
},
140-
{
141-
id: "345",
142-
preview: `https://i.imgur.com/6x1wrIJ.png`,
143-
title: `wabisabi-js/isthereuber.in`,
144-
description: `Simple app to tell you where there is uber`,
145-
likes: 32,
146-
views: 122,
147-
forks: 234,
148-
environment: `React`
149-
},
150-
{
151-
id: "678",
152-
preview: `https://i.imgur.com/JxGN2TS.png`,
153-
title: `wabisabi-js/isthereuber.in`,
154-
description: `Simple app to tell you where there is uber`,
155-
likes: 32,
156-
views: 122,
157-
forks: 234,
158-
environment: `React`
159-
}
160-
]
161-
}
162-
}
65+
user: {
66+
id: `userID`,
67+
avatar: `https://avatars2.githubusercontent.com/u/42876?s=200&v=4`,
68+
isPro: false,
69+
isTeam: true,
70+
name: `Framer`,
71+
username: `Festina Lente`,
72+
bio: `Bring your creative ideas to life with Framer X, the best tool for interactive design. Create responsive layouts, design realistic prototypes, and bring everything closer to production—all in one place`,
73+
totalSandboxes: 450,
74+
totalTemplates: 135,
75+
totalLikes: 789,
76+
associations: [
77+
{
78+
thumbnail: `https://avatars2.githubusercontent.com/u/10724744?s=96&v=4`,
79+
url: ``,
80+
entityName: `Stefan Mansson`,
81+
},
82+
{
83+
thumbnail: `https://avatars3.githubusercontent.com/u/12829?s=96&v=4`,
84+
url: ``,
85+
entityName: `Eelco Lempsink`,
86+
},
87+
{
88+
thumbnail: `https://avatars0.githubusercontent.com/u/39778?s=96&v=4`,
89+
url: ``,
90+
entityName: `Jordan Dobson`,
91+
},
92+
{
93+
thumbnail: `https://avatars3.githubusercontent.com/u/206779?s=96&v=4`,
94+
url: ``,
95+
entityName: `Koen Bok`,
96+
},
97+
{
98+
thumbnail: `https://avatars3.githubusercontent.com/u/28392?s=96&v=4`,
99+
url: ``,
100+
entityName: `Stefan Borsje`,
101+
},
102+
],
103+
socialLinks: [
104+
`https://twitter.com/framer`,
105+
`https://www.framer.com/`,
106+
`https://github.com/framer`,
107+
],
108+
featured: {
109+
id: '123',
110+
heroImage: `https://i.imgur.com/h2nQnqU.png`,
111+
},
112+
pinned: [
113+
{
114+
id: '123',
115+
preview: `https://i.imgur.com/iy4AKF1.png`,
116+
title: `wabisabi-js/isthereuber.in`,
117+
description: `Simple app to tell you where there is uber`,
118+
likes: 999999,
119+
views: 999999,
120+
forks: 999999,
121+
environment: `React`,
122+
},
123+
{
124+
id: '456',
125+
preview: `https://i.imgur.com/Kl4WYmI.png`,
126+
title: `wabisabi-js/isthereuber.in`,
127+
description: `Simple app to tell you where there is uber`,
128+
likes: 32,
129+
views: 122,
130+
forks: 234,
131+
environment: `React`,
132+
},
133+
{
134+
id: '789',
135+
preview: `https://i.imgur.com/9xitUWN.png`,
136+
title: `wabisabi-js/isthereuber.in`,
137+
description: `Simple app to tell you where there is uber`,
138+
likes: 32,
139+
views: 122,
140+
forks: 234,
141+
environment: `React`,
142+
},
143+
{
144+
id: '012',
145+
preview: `https://i.imgur.com/Ihb874i.png`,
146+
title: `wabisabi-js/isthereuber.in`,
147+
description: `Simple app to tell you where there is uber`,
148+
likes: 32,
149+
views: 122,
150+
forks: 234,
151+
environment: `React`,
152+
},
153+
{
154+
id: '345',
155+
preview: `https://i.imgur.com/t3TVRY8.png`,
156+
title: `wabisabi-js/isthereuber.in`,
157+
description: `Simple app to tell you where there is uber`,
158+
likes: 32,
159+
views: 122,
160+
forks: 234,
161+
environment: `React`,
162+
},
163+
],
164+
sandboxes,
165+
templates: sandboxes,
166+
likes: sandboxes,
167+
},
168+
};

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import styled from "styled-components"
1+
import styled from 'styled-components';
22

33
export const Container = styled.div`
44
grid-area: featured;
55
width: 100%;
6-
`
6+
margin-bottom: 1.75rem;
7+
`;
78

89
export const HeroImage = styled.img`
910
width: 100%;
10-
`
11+
`;

0 commit comments

Comments
 (0)