-
-
Notifications
You must be signed in to change notification settings - Fork 32k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[docs] Add Joy Frames X web blocks template (#37203)
- Loading branch information
1 parent
62e0748
commit 845f795
Showing
27 changed files
with
942 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
88 changes: 88 additions & 0 deletions
88
docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
import * as React from 'react'; | ||
import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; | ||
|
||
import Box from '@mui/joy/Box'; | ||
import CssBaseline from '@mui/joy/CssBaseline'; | ||
import IconButton from '@mui/joy/IconButton'; | ||
|
||
// Icons import | ||
import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded'; | ||
import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded'; | ||
|
||
import framesxTheme from './theme'; | ||
import HeroLeft01 from './blocks/HeroLeft01'; | ||
import HeroLeft02 from './blocks/HeroLeft02'; | ||
import HeroLeft03 from './blocks/HeroLeft03'; | ||
import HeroLeft04 from './blocks/HeroLeft04'; | ||
import HeroLeft05 from './blocks/HeroLeft05'; | ||
import HeroLeft06 from './blocks/HeroLeft06'; | ||
import HeroLeft07 from './blocks/HeroLeft07'; | ||
import HeroLeft08 from './blocks/HeroLeft08'; | ||
import HeroLeft09 from './blocks/HeroLeft09'; | ||
import HeroLeft10 from './blocks/HeroLeft10'; | ||
|
||
function ColorSchemeToggle() { | ||
const { mode, setMode } = useColorScheme(); | ||
const [mounted, setMounted] = React.useState(false); | ||
React.useEffect(() => { | ||
setMounted(true); | ||
}, []); | ||
if (!mounted) { | ||
return null; | ||
} | ||
return ( | ||
<IconButton | ||
id="toggle-mode" | ||
size="lg" | ||
variant="soft" | ||
color="neutral" | ||
onClick={() => { | ||
if (mode === 'light') { | ||
setMode('dark'); | ||
} else { | ||
setMode('light'); | ||
} | ||
}} | ||
sx={{ | ||
position: 'fixed', | ||
zIndex: 999, | ||
top: '1rem', | ||
right: '1rem', | ||
borderRadius: '50%', | ||
boxShadow: 'sm', | ||
}} | ||
> | ||
{mode === 'light' ? <DarkModeRoundedIcon /> : <LightModeRoundedIcon />} | ||
</IconButton> | ||
); | ||
} | ||
|
||
export default function TeamExample() { | ||
return ( | ||
<CssVarsProvider disableTransitionOnChange theme={framesxTheme}> | ||
<CssBaseline /> | ||
<ColorSchemeToggle /> | ||
<Box | ||
sx={{ | ||
height: '100vh', | ||
overflowY: 'scroll', | ||
scrollSnapType: 'y mandatory', | ||
'& > div': { | ||
scrollSnapAlign: 'start', | ||
}, | ||
}} | ||
> | ||
<HeroLeft01 /> | ||
<HeroLeft02 /> | ||
<HeroLeft03 /> | ||
<HeroLeft04 /> | ||
<HeroLeft05 /> | ||
<HeroLeft06 /> | ||
<HeroLeft07 /> | ||
<HeroLeft08 /> | ||
<HeroLeft09 /> | ||
<HeroLeft10 /> | ||
</Box> | ||
</CssVarsProvider> | ||
); | ||
} |
46 changes: 46 additions & 0 deletions
46
docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft01.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
/* eslint-disable jsx-a11y/anchor-is-valid */ | ||
import * as React from 'react'; | ||
import Button from '@mui/joy/Button'; | ||
import Link from '@mui/joy/Link'; | ||
import Typography from '@mui/joy/Typography'; | ||
import ArrowForward from '@mui/icons-material/ArrowForward'; | ||
import TwoSidedLayout from '../components/TwoSidedLayout'; | ||
|
||
export default function HeroLeft01() { | ||
return ( | ||
<TwoSidedLayout> | ||
<Typography color="primary" fontSize="lg" fontWeight="lg"> | ||
The power to do more | ||
</Typography> | ||
<Typography | ||
level="h1" | ||
fontWeight="xl" | ||
fontSize="clamp(1.875rem, 1.3636rem + 2.1818vw, 3rem)" | ||
> | ||
A large headlinerer about our product features & services | ||
</Typography> | ||
<Typography fontSize="lg" textColor="text.secondary" lineHeight="lg"> | ||
A descriptive secondary text placeholder. Use it to explain your business | ||
offer better. | ||
</Typography> | ||
<Button size="lg" endDecorator={<ArrowForward fontSize="xl" />}> | ||
Get Started | ||
</Button> | ||
<Typography> | ||
Already a member? <Link fontWeight="lg">Sign in</Link> | ||
</Typography> | ||
|
||
<Typography | ||
level="body3" | ||
sx={{ | ||
position: 'absolute', | ||
top: '2rem', | ||
left: '50%', | ||
transform: 'translateX(-50%)', | ||
}} | ||
> | ||
HeroLeft01 | ||
</Typography> | ||
</TwoSidedLayout> | ||
); | ||
} |
102 changes: 102 additions & 0 deletions
102
docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft02.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
import * as React from 'react'; | ||
import Box from '@mui/joy/Box'; | ||
import Button from '@mui/joy/Button'; | ||
import Input from '@mui/joy/Input'; | ||
import Typography from '@mui/joy/Typography'; | ||
import ArrowForward from '@mui/icons-material/ArrowForward'; | ||
import Star from '@mui/icons-material/Star'; | ||
import TwoSidedLayout from '../components/TwoSidedLayout'; | ||
|
||
export default function HeroLeft02() { | ||
return ( | ||
<TwoSidedLayout> | ||
<Typography color="primary" fontSize="lg" fontWeight="lg"> | ||
The power to do more | ||
</Typography> | ||
<Typography | ||
level="h1" | ||
fontWeight="xl" | ||
fontSize="clamp(1.875rem, 1.3636rem + 2.1818vw, 3rem)" | ||
> | ||
A large headlinerer about our product features & services | ||
</Typography> | ||
<Typography fontSize="lg" textColor="text.secondary" lineHeight="lg"> | ||
A descriptive secondary text placeholder. Use it to explain your business | ||
offer better. | ||
</Typography> | ||
<Box | ||
sx={{ | ||
display: 'flex', | ||
gap: 2, | ||
my: 2, | ||
flexWrap: 'wrap', | ||
'& > *': { flex: 'auto' }, | ||
}} | ||
> | ||
<Input size="lg" placeholder="Sign in with email" /> | ||
<Button size="lg" endDecorator={<ArrowForward fontSize="xl" />}> | ||
Get Started | ||
</Button> | ||
</Box> | ||
<Box | ||
sx={(theme) => ({ | ||
display: 'flex', | ||
textAlign: 'center', | ||
alignSelf: 'stretch', | ||
columnGap: 4.5, | ||
'& > *': { | ||
display: 'flex', | ||
flexDirection: 'column', | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
flexWrap: 'wrap', | ||
flex: 1, | ||
}, | ||
[theme.breakpoints.up(834)]: { | ||
textAlign: 'left', | ||
'& > *': { | ||
flexDirection: 'row', | ||
gap: 1.5, | ||
justifyContent: 'initial', | ||
flexWrap: 'nowrap', | ||
flex: 'none', | ||
}, | ||
}, | ||
})} | ||
> | ||
<Box> | ||
<Typography | ||
fontSize="xl4" | ||
fontWeight="lg" | ||
endDecorator={<Star fontSize="xl4" sx={{ color: 'warning.300' }} />} | ||
> | ||
4.9 | ||
</Typography> | ||
<Typography textColor="text.secondary"> | ||
Over <b>5k</b> positive <br /> customer reviews. | ||
</Typography> | ||
</Box> | ||
<Box> | ||
<Typography fontSize="xl4" fontWeight="lg"> | ||
2M | ||
</Typography> | ||
<Typography textColor="text.secondary"> | ||
Global <br /> Transactions. | ||
</Typography> | ||
</Box> | ||
</Box> | ||
|
||
<Typography | ||
level="body3" | ||
sx={{ | ||
position: 'absolute', | ||
top: '2rem', | ||
left: '50%', | ||
transform: 'translateX(-50%)', | ||
}} | ||
> | ||
HeroLeft02 | ||
</Typography> | ||
</TwoSidedLayout> | ||
); | ||
} |
79 changes: 79 additions & 0 deletions
79
docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft03.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
import * as React from 'react'; | ||
import AvatarGroup from '@mui/joy/AvatarGroup'; | ||
import Avatar from '@mui/joy/Avatar'; | ||
import Box from '@mui/joy/Box'; | ||
import Button from '@mui/joy/Button'; | ||
import Typography from '@mui/joy/Typography'; | ||
import ArrowForward from '@mui/icons-material/ArrowForward'; | ||
import TwoSidedLayout from '../components/TwoSidedLayout'; | ||
|
||
export default function HeroLeft03() { | ||
return ( | ||
<TwoSidedLayout> | ||
<Typography color="primary" fontSize="lg" fontWeight="lg"> | ||
The power to do more | ||
</Typography> | ||
<Typography | ||
level="h1" | ||
fontWeight="xl" | ||
fontSize="clamp(1.875rem, 1.3636rem + 2.1818vw, 3rem)" | ||
> | ||
A large headlinerer about our product features & services | ||
</Typography> | ||
<Typography fontSize="lg" textColor="text.secondary" lineHeight="lg"> | ||
A descriptive secondary text placeholder. Use it to explain your business | ||
offer better. | ||
</Typography> | ||
<Box | ||
sx={{ | ||
display: 'flex', | ||
flexWrap: 'wrap', | ||
gap: 2, | ||
my: 2, | ||
'& > *': { flex: 'auto' }, | ||
}} | ||
> | ||
<Button size="lg" variant="outlined" color="neutral"> | ||
Learn More | ||
</Button> | ||
<Button size="lg" endDecorator={<ArrowForward fontSize="xl" />}> | ||
Get Started | ||
</Button> | ||
</Box> | ||
<Box | ||
sx={{ | ||
display: 'flex', | ||
flexWrap: 'wrap', | ||
justifyContent: 'center', | ||
gap: 2, | ||
textAlign: 'left', | ||
'& > *': { | ||
flexShrink: 0, | ||
}, | ||
}} | ||
> | ||
<AvatarGroup size="lg"> | ||
<Avatar /> | ||
<Avatar /> | ||
<Avatar /> | ||
</AvatarGroup> | ||
<Typography textColor="text.secondary"> | ||
Join a community of over <b>10K</b> <br /> | ||
designers and developers. | ||
</Typography> | ||
</Box> | ||
|
||
<Typography | ||
level="body3" | ||
sx={{ | ||
position: 'absolute', | ||
top: '2rem', | ||
left: '50%', | ||
transform: 'translateX(-50%)', | ||
}} | ||
> | ||
HeroLeft03 | ||
</Typography> | ||
</TwoSidedLayout> | ||
); | ||
} |
Oops, something went wrong.