Skip to content

Commit 314cf5d

Browse files
austincondiffaustincondiff
committed
Added layout components and began home page
1 parent 7fba9db commit 314cf5d

85 files changed

Lines changed: 3407 additions & 166 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎components/common/Button.jsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import styled from "styled-components";
2+
3+
const Button = styled.button`
4+
cursor: pointer;
5+
display: inline-block;
6+
text-align: center;
7+
white-space: nowrap;
8+
font-size: 17px;
9+
line-height: 1.17648;
10+
font-weight: 400;
11+
letter-spacing: -.022em;
12+
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
13+
min-width: 28px;
14+
padding-left: 16px;
15+
padding-right: 16px;
16+
padding-top: 8px;
17+
padding-bottom: 8px;
18+
border-radius: 18px;
19+
background: #0071e3;
20+
color: #fff;
21+
border: 0;
22+
outline: 0;
23+
24+
${({ compact }) => compact ? `
25+
font-size: 12px;
26+
line-height: 1.33337;
27+
font-weight: 400;
28+
letter-spacing: -.01em;
29+
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
30+
min-width: 23px;
31+
padding-left: 11px;
32+
padding-right: 11px;
33+
padding-top: 4px;
34+
padding-bottom: 4px;
35+
border-radius: 12px;
36+
` : ``}
37+
`;
38+
39+
export default Button;

‎components/common/ColorSchemeToggle.jsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React, { useState, useEffect } from "react";
2+
import styled from "styled-components"
3+
import { useSite } from "@/components/common/Site";
4+
5+
const ColorSchemeToggleWrap = styled.div`
6+
--toggle-border-radius-outer: 12px;
7+
--toggle-border-radius-inner: 10px;
8+
--toggle-color-fill: var(--color-button-background-active);
9+
--toggle-color-text: var(--color-fill-blue);
10+
11+
font-size: 12px;
12+
line-height: 1.33337;
13+
font-weight: 400;
14+
letter-spacing: -.01em;
15+
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
16+
border: 1px solid var(--toggle-color-fill);
17+
border-radius: var(--toggle-border-radius-outer, 2px);
18+
display: inline-flex;
19+
padding: 1px;
20+
input[type="radio"] {
21+
position: absolute;
22+
clip: rect(1px, 1px, 1px, 1px);
23+
clip-path: inset(0px 0px 99.9% 99.9%);
24+
overflow: hidden;
25+
height: 1px;
26+
width: 1px;
27+
padding: 0;
28+
border: 0;
29+
appearance: none;
30+
}
31+
`;
32+
const ToggleOptionText = styled.div`
33+
box-sizing: border-box;
34+
display: inline-block;
35+
padding: 1px 6px;
36+
min-width: 42px;
37+
border: 1px solid transparent;
38+
border-radius: var(--toggle-border-radius-inner, 2px);
39+
text-align: center;
40+
color: var(--toggle-color-text);
41+
42+
input[type="radio"]:checked + & {
43+
--toggle-color-text: var(--color-button-text);
44+
background: var(--toggle-color-fill);
45+
border-color: var(--toggle-color-fill);
46+
}
47+
`;
48+
49+
function ColorSchemeToggle() {
50+
const [toggleValue, setToggleValue] = useState('auto');
51+
const { setColorScheme } = useSite();
52+
53+
useEffect(() => {
54+
const theme = window.localStorage.getItem('themeColor');
55+
56+
if (theme) setToggleValue(theme)
57+
}, []);
58+
59+
useEffect(() => {
60+
setColorScheme(toggleValue)
61+
}, [setColorScheme, toggleValue])
62+
63+
const handleChange = (e) => setToggleValue(e.target.value)
64+
65+
return (
66+
<ColorSchemeToggleWrap role="radiogroup" tabIndex={0} aria-label="Select a color scheme preference.">
67+
<label data-color-scheme-option="light">
68+
<input type="radio" name="colorToggle" value="light" autoComplete="off" checked={toggleValue === 'light'} onChange={handleChange} />
69+
<ToggleOptionText>Light</ToggleOptionText>
70+
</label>
71+
<label data-color-scheme-option="dark">
72+
<input type="radio" name="colorToggle" value="dark" autoComplete="off" checked={toggleValue === 'dark'} onChange={handleChange} />
73+
<ToggleOptionText>Dark</ToggleOptionText>
74+
</label>
75+
<label data-color-scheme-option="auto">
76+
<input type="radio" name="colorToggle" value="auto" autoComplete="off" checked={toggleValue === 'auto'} onChange={handleChange} />
77+
<ToggleOptionText>Auto</ToggleOptionText>
78+
</label>
79+
</ColorSchemeToggleWrap>
80+
)
81+
}
82+
83+
export default ColorSchemeToggle;

‎components/common/Footer.jsx‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import Link from 'next/link';
2+
import React from 'react';
3+
import styled from 'styled-components'
4+
import ColorSchemeToggle from './ColorSchemeToggle';
5+
6+
const FooterWrap = styled.footer`
7+
font-size: 12px;
8+
line-height: 1.33337;
9+
font-weight: 400;
10+
letter-spacing: -.01em;
11+
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
12+
min-width: 1024px;
13+
overflow: hidden;
14+
position: relative;
15+
z-index: 1;
16+
background-color: var(--background-tertiary-color);
17+
color: var(--label-tertiary-color);
18+
box-sizing: content-box;
19+
`
20+
21+
const FooterContent = styled.div`
22+
margin: 0 auto;
23+
max-width: 980px;
24+
padding: 0 22px;
25+
padding-left: calc(max(22px, env(safe-area-inset-left)));
26+
padding-right: calc(max(22px, env(safe-area-inset-right)));
27+
`
28+
29+
const FooterMini = styled.section`
30+
color: var(--glyph-gray-tertiary);
31+
padding-top: 34px;
32+
padding-bottom: calc(max(21px, env(safe-area-inset-bottom)));
33+
color: #86868b;
34+
`
35+
const MiniFooterTop = styled.div`
36+
margin-bottom: 7px;
37+
padding-bottom: 8px;
38+
border-bottom: 1px solid #d2d2d7;
39+
display: flex;
40+
align-items: flex-end;
41+
justify-content: space-between;
42+
43+
border-color: var(--separator-color);
44+
a {
45+
color: var(--glyph-blue);
46+
:hover {
47+
text-decoration: underline;
48+
}
49+
}
50+
}
51+
`
52+
const LegalCopyright = styled.div`
53+
`
54+
const LegalLinks = styled.div`
55+
display: flex;
56+
a {
57+
border-right: 1px solid #d2d2d7;
58+
margin-right: 7px;
59+
padding-right: 10px;
60+
display: inline-block;
61+
margin-top: 5px;
62+
white-space: nowrap;
63+
64+
color: var(--glyph-gray-secondary-alt);
65+
border-color: var(--fill-gray-tertiary);
66+
67+
:last-child {
68+
border: 0;
69+
margin-right: 0;
70+
padding-right: 0;
71+
}
72+
}
73+
`
74+
const LegalLink = styled(Link)``
75+
76+
const MiniFooterBottom = styled.div`
77+
display: flex;
78+
justify-content: space-between;
79+
a {
80+
color: var(--glyph-gray-secondary-alt);
81+
:hover {
82+
text-decoration: underline;
83+
}
84+
}
85+
`
86+
87+
function Footer() {
88+
let currentYear = new Date().getFullYear();
89+
90+
return (
91+
<FooterWrap
92+
id="footer"
93+
className="footer"
94+
role="contentinfo"
95+
aria-labelledby="footer-label"
96+
>
97+
<FooterContent>
98+
<FooterMini>
99+
<MiniFooterTop>
100+
<div>To view the latest CodeEdit developments, visit <a href="https://github.com/CodeEditApp/CodeEdit">our GitHub repo</a>.</div>
101+
<ColorSchemeToggle />
102+
</MiniFooterTop>
103+
<MiniFooterBottom>
104+
<LegalCopyright>
105+
Copyright &copy; {currentYear}{' '}
106+
<a href="https://codeedit.app">CodeEdit.</a> All rights reserved.
107+
</LegalCopyright>
108+
<LegalLinks>
109+
<LegalLink href="/legal/tos">
110+
Terms of Use
111+
</LegalLink>
112+
<LegalLink href="/legal/privacy">
113+
Privacy Policy
114+
</LegalLink>
115+
<LegalLink href="/legal/terms">
116+
Agreements and Open Source Licenses
117+
</LegalLink>
118+
</LegalLinks>
119+
</MiniFooterBottom>
120+
</FooterMini>
121+
</FooterContent>
122+
</FooterWrap>
123+
);
124+
}
125+
126+
export default Footer;

0 commit comments

Comments
 (0)