Skip to content

Commit 5b4ac65

Browse files
austincondiffaustincondiff
committed
Added visibility prop, moved navigation to data file
1 parent 0e5e94f commit 5b4ac65

21 files changed

+234
-77
lines changed

‎components/common/Footer.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ const FooterWrap = styled.footer`
99
font-weight: 400;
1010
letter-spacing: -.01em;
1111
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
12-
min-width: 1024px;
1312
overflow: hidden;
1413
position: relative;
1514
z-index: 1;

‎components/common/Header.jsx‎

Lines changed: 18 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import styled from 'styled-components'
55
import { ExternalLink } from "react-feather"
66
import Button from '@/components/common/Button';
77
import { Container } from '@/components/common/layout';
8+
import { mediaQueries } from '@/styles/breakpoints';
9+
import navigation from '@/data/navigation';
810

911
const Nav = styled.nav`
1012
position: relative;
@@ -69,6 +71,9 @@ const MenuTray = styled.div`
6971
display: flex;
7072
align-items: center;
7173
gap: 24px;
74+
@media ${mediaQueries.sm} {
75+
display: none;
76+
}
7277
`;
7378
const MenuItems = styled.ul``;
7479
const MenuItem = styled.li`
@@ -92,6 +97,7 @@ const MenuItem = styled.li`
9297
&& a {
9398
color: var(--foreground-color) !important;
9499
opacity: 0.5;import { Container } from '@/components/common/Container';
100+
import { mediaQueries } from '../../styles/mediaQueries';
95101
96102
}
97103
` : ``}
@@ -127,40 +133,18 @@ function Header() {
127133
</MenuCtaAnchor>
128134
<MenuTray>
129135
<MenuItems>
130-
<MenuItem $current={asPath === "/"}>
131-
<MenuLink href="/">
132-
CodeEdit
133-
</MenuLink>
134-
</MenuItem>
135-
<MenuItem $current={asPath === "/whats-new"}>
136-
<MenuLink href="/whats-new">
137-
What’s included
138-
</MenuLink>
139-
</MenuItem>
140-
<MenuItem $current={asPath === "/resources"}>
141-
<MenuLink href="/resources">
142-
Resources
143-
</MenuLink>
144-
</MenuItem>
145-
<MenuItem $current={asPath === "/developer"}>
146-
<MenuLink href="/developer">
147-
Developer
148-
</MenuLink>
149-
</MenuItem>
150-
<MenuItem $current={asPath === "/extensions"}>
151-
<MenuLink href="/extensions">
152-
Extensions
153-
</MenuLink>
154-
</MenuItem>
155-
<MenuItem>
156-
<MenuLink
157-
href="https://github.com/CodeEditApp/CodeEdit"
158-
target="_blank"
159-
>
160-
GitHub
161-
</MenuLink>
162-
<StyledExternalLink size={11} />
163-
</MenuItem>
136+
{navigation.map(item => {
137+
const isExternal = item.href.match(/(https?:\/\/[\w\d.-]+)/gi);
138+
139+
return (
140+
<MenuItem key={item.href} $current={asPath === item.href} {...(isExternal ? { target: "_blank" } : {})}>
141+
<MenuLink href={item.href}>
142+
{item.label}
143+
</MenuLink>
144+
{isExternal && <StyledExternalLink size={11} />}
145+
</MenuItem>
146+
);
147+
})}
164148
</MenuItems>
165149
</MenuTray>
166150
<Actions>

‎components/common/Site.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect, useContext } from "react";
22
import theme from "@/styles/theme";
33
import { ThemeProvider } from "styled-components";
44
import useColorScheme from "@/hooks/useColorScheme";
5+
import useWindowDimensions from '../../hooks/useWindowDimensions';
56

67
export const SiteContext = React.createContext({});
78

@@ -13,11 +14,10 @@ export const useSite = () => useContext(SiteContext);
1314

1415
const Site = ({ children }) => {
1516
const { colorScheme, setColorScheme } = useColorScheme();
16-
17-
console.log({ colorScheme })
17+
const windowDimensions = useWindowDimensions();
1818

1919
return (
20-
<SiteContextProvider value={{ colorScheme, setColorScheme }}>
20+
<SiteContextProvider value={{ colorScheme, setColorScheme, windowDimensions }}>
2121
<ThemeProvider theme={theme}>
2222
{children}
2323
</ThemeProvider>

‎components/common/Typography.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import PropTypes from 'prop-types';
22
import styled from 'styled-components';
3-
import getTypographyStyles from '../../styles/getTypographyStyles';
3+
import getTypographyStyles from '@/styles/getTypographyStyles';
44

55
const TypographyWrap = styled.p`
66
${({ variant }) => getTypographyStyles(variant)}

‎components/common/layout/Grid.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ const Grid = styled.div`
77
${({ columns }) => getResponsivePropStyles(columns, (val) => `grid-template-columns: repeat(${val}, 1fr);`)}
88
${({ rowHeight }) => getResponsivePropStyles(rowHeight, (val) => `grid-auto-rows: ${getSpacing(val)};`)}
99
${({ gap }) => getResponsivePropStyles(gap, (val) => `gap: ${getSpacing(val)};`)}
10-
1110
`;
1211

1312
export default Grid;

‎components/common/layout/GridItem.jsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import styled from "styled-components"
33
import getResponsivePropStyles from '@/styles/getResponsivePropStyles';
4+
import useVisibilityProps from '../../../hooks/useVisibilityProps';
45

56
const GridItemWrap = styled.div`
67
${({ $width }) => getResponsivePropStyles($width, (val) => `grid-column-start: ${Number(val ?? 1)} span;`)}
@@ -10,9 +11,11 @@ const GridItemWrap = styled.div`
1011
`;
1112

1213
const GridItem = ({ children, width, height, as, ...props }) => {
13-
return (
14+
const isVisible = useVisibilityProps(props);
15+
16+
return isVisible ? (
1417
<GridItemWrap $width={width} $height={height} as={as} {...props}>{children}</GridItemWrap>
15-
)
18+
) : null;
1619
}
1720

1821
export default GridItem;

‎components/common/layout/Section.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import styled from "styled-components";
22
import RestrictedContainer from "./Container"
33
import getSpacing from '@/styles/spacing';
44
import getResponsivePropStyles from '@/styles/getResponsivePropStyles';
5+
import useVisibilityProps from "@/hooks/useVisibilityProps";
56

67
const SectionWrap = styled.section`
78
${({ gutter, gutterTop, gutterY }) => getResponsivePropStyles((gutterTop ?? gutterY ?? gutter ?? 8), (val) => `
@@ -24,6 +25,9 @@ const FullWidthContainer = styled.div`
2425
export default function Section (props) {
2526
let { children, className, contained, gutter, gutterTop, gutterBottom, gutterLeft, gutterRight, gutterX = true, gutterY } = props;
2627
const Container = contained ? RestrictedContainer : FullWidthContainer;
28+
const isVisible = useVisibilityProps(props);
29+
30+
if (!isVisible) return null;
2731

2832
const defaultGutterX = 3;
2933
const defaultGutterY = 8;

‎components/pages/home/sections/FeaturesSection.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ const FeaturesSection = () => {
1212
This is a description of the features section.
1313
</Typography>
1414
</Stack>
15-
<Grid columns={3} gap>
16-
<GridItem as={Tile} width={3} color="purple" gradient>
15+
<Grid columns={{ xs: 1, md: 2, lg: 3 }} gap>
16+
<GridItem as={Tile} width={{ xs: 1, md: 2, lg: 3 }} color="purple" gradient>
1717
<Stack gap={2}>
1818
<Sliders />
1919
<Typography variant="eyebrow">Feature Title 1</Typography>
@@ -22,7 +22,7 @@ const FeaturesSection = () => {
2222
</Typography>
2323
</Stack>
2424
</GridItem>
25-
<GridItem as={Tile} width={2}>
25+
<GridItem as={Tile} width={{xs: 1, lg: 2}}>
2626
<Stack gap={2}>
2727
<Sliders />
2828
<Typography variant="eyebrow">Feature Title 2</Typography>
@@ -31,7 +31,7 @@ const FeaturesSection = () => {
3131
</Typography>
3232
</Stack>
3333
</GridItem>
34-
<GridItem as={Tile} height={2}>
34+
<GridItem as={Tile} height={{xs: 1, lg: 2}}>
3535
<Stack gap={2}>
3636
<Sliders />
3737
<Typography variant="eyebrow">Feature Title 4</Typography>
@@ -40,7 +40,7 @@ const FeaturesSection = () => {
4040
</Typography>
4141
</Stack>
4242
</GridItem>
43-
<GridItem as={Tile} start="1/3" end="1/3">
43+
<GridItem as={Tile}>
4444
<Stack gap={2}>
4545
<Sliders />
4646
<Typography variant="eyebrow">Feature Title 2</Typography>
@@ -49,7 +49,7 @@ const FeaturesSection = () => {
4949
</Typography>
5050
</Stack>
5151
</GridItem>
52-
<GridItem as={Tile} start="2/3" end="2/3">
52+
<GridItem as={Tile}>
5353
<Stack gap={2}>
5454
<Sliders />
5555
<Typography variant="eyebrow">Feature Title 3</Typography>

‎components/pages/home/sections/IntroFeaturesSection.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Grid, GridItem, Section, Stack } from '@/components/common/layout';
66
const IntroFeaturesSection = () => {
77
return (
88
<Section contained gutterBottom>
9-
<Grid columns={{ md: 2, lg: 4 }} gap>
9+
<Grid columns={{ xs: 1, md: 2, lg: 4 }} gap>
1010
<GridItem as={Tile}>
1111
<Stack gap={2}>
1212
<Sliders />

‎components/pages/home/sections/MoreFeaturesSection.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ const MoreFeaturesSection = () => {
1212
This is a description of the features section.
1313
</Typography>
1414
</Stack>
15-
<Grid columns={3} gap>
16-
<GridItem as={Tile} width={3} color="pink" gradient>
15+
<Grid columns={{ xs: 1, md: 2, lg: 3 }} gap>
16+
<GridItem as={Tile} width={{ xs: 1, md: 2, lg: 3 }} color="pink" gradient>
1717
<Stack gap={2}>
1818
<Sliders />
1919
<Typography variant="eyebrow">Feature Title 1</Typography>
@@ -22,7 +22,7 @@ const MoreFeaturesSection = () => {
2222
</Typography>
2323
</Stack>
2424
</GridItem>
25-
<GridItem as={Tile} height={2}>
25+
<GridItem as={Tile} height={{ xs: 1, lg: 2 }}>
2626
<Stack gap={2}>
2727
<Sliders />
2828
<Typography variant="eyebrow">Feature Title 4</Typography>
@@ -31,7 +31,7 @@ const MoreFeaturesSection = () => {
3131
</Typography>
3232
</Stack>
3333
</GridItem>
34-
<GridItem as={Tile} start="1/3" end="1/3">
34+
<GridItem as={Tile}>
3535
<Stack gap={2}>
3636
<Sliders />
3737
<Typography variant="eyebrow">Feature Title 2</Typography>
@@ -40,7 +40,7 @@ const MoreFeaturesSection = () => {
4040
</Typography>
4141
</Stack>
4242
</GridItem>
43-
<GridItem as={Tile} start="2/3" end="2/3">
43+
<GridItem as={Tile}>
4444
<Stack gap={2}>
4545
<Sliders />
4646
<Typography variant="eyebrow">Feature Title 3</Typography>
@@ -49,7 +49,7 @@ const MoreFeaturesSection = () => {
4949
</Typography>
5050
</Stack>
5151
</GridItem>
52-
<GridItem as={Tile} width={2}>
52+
<GridItem as={Tile} width={{ xs: 1, lg: 2 }}>
5353
<Stack gap={2}>
5454
<Sliders />
5555
<Typography variant="eyebrow">Feature Title 2</Typography>

0 commit comments

Comments
 (0)