106 lines
2.8 KiB
JavaScript
106 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
|