105 lines
2.8 KiB
JavaScript
105 lines
2.8 KiB
JavaScript
import React, {useState} from 'react'
|
||
import {
|
||
Card,
|
||
Container,
|
||
Button,
|
||
Flex,
|
||
Label,
|
||
Heading,
|
||
Text,
|
||
Stack,
|
||
useElementRect,
|
||
useTheme,
|
||
} from '@sanity/ui'
|
||
import {CloseIcon} from '@sanity/icons'
|
||
import styled, {css} from 'styled-components'
|
||
|
||
const BlueColor = css`
|
||
color: ${({theme}) => theme.sanity.color.muted.primary.enabled.fg};
|
||
`
|
||
|
||
const LabelContainer = styled(Label)`
|
||
${BlueColor}
|
||
`
|
||
|
||
const TextContainer = styled(Text)`
|
||
${BlueColor}
|
||
`
|
||
|
||
export const GetStartedTutorial = () => {
|
||
const [hideTutorial, setShowTutorial] = useState(
|
||
window.localStorage.getItem('getstarted_closedTutorial') !== null
|
||
)
|
||
|
||
const {sanity} = useTheme()
|
||
const [rootElement, setRootElement] = useState()
|
||
const rect = useElementRect(rootElement)
|
||
const isSmallScreen = rect?.width < sanity.media[1]
|
||
const isProdEnv = process.env.NODE_ENV !== 'development'
|
||
|
||
const onClose = () => {
|
||
window.localStorage.setItem('getstarted_closedTutorial', 'true')
|
||
setShowTutorial(true)
|
||
}
|
||
|
||
if (hideTutorial || isProdEnv) {
|
||
return null
|
||
}
|
||
|
||
return (
|
||
<div ref={setRootElement}>
|
||
<Card tone="primary" padding={isSmallScreen ? 3 : 5} paddingBottom={isSmallScreen ? 4 : 6}>
|
||
<Flex justify={isSmallScreen ? 'space-between' : 'flex-end'} align="center">
|
||
{isSmallScreen && (
|
||
<LabelContainer forwardedAs="p">Your Sanity Studio is all set up!</LabelContainer>
|
||
)}
|
||
|
||
<Button
|
||
aria-label="Close dialog"
|
||
icon={CloseIcon}
|
||
mode="bleed"
|
||
onClick={onClose}
|
||
padding={isSmallScreen ? undefined : 3}
|
||
/>
|
||
</Flex>
|
||
<Stack space={5}>
|
||
{!isSmallScreen && (
|
||
<>
|
||
<LabelContainer forwardedAs="p" align="center">
|
||
Get started with sanity
|
||
</LabelContainer>
|
||
|
||
<Heading as="h1" size={4} align="center">
|
||
Your Sanity Studio is all set up!
|
||
</Heading>
|
||
</>
|
||
)}
|
||
|
||
<Container width={1}>
|
||
<TextContainer
|
||
forwardedAs="p"
|
||
size={isSmallScreen ? 1 : undefined}
|
||
align={isSmallScreen ? 'start' : 'center'}
|
||
>
|
||
Next, our docs will guide you through building schemas, adding content, and connecting
|
||
a frontend. You’ll see updates reflected in your Studio below.
|
||
</TextContainer>
|
||
</Container>
|
||
|
||
<Flex justify={isSmallScreen ? 'start' : 'center'}>
|
||
<Button
|
||
as="a"
|
||
href="https://www.sanity.io/docs/create-a-schema-and-configure-sanity-studio"
|
||
target="_blank"
|
||
padding={isSmallScreen ? undefined : 4}
|
||
tone="primary"
|
||
text="Build a schema"
|
||
/>
|
||
</Flex>
|
||
</Stack>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default GetStartedTutorial
|