Skip to content

Commit

Permalink
feat: set hero as fixed first block for homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
@dcshzj
dcshzj committed Jul 29, 2024
1 parent 5cacd43 commit be46aea
Showing 1 changed file with 110 additions and 82 deletions.
192 changes: 110 additions & 82 deletions apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ export default function RootStateDrawer() {
setDrawerState,
setCurrActiveIdx,
savedPageState,
previewPageState,
setSavedPageState,
setPreviewPageState,
} = useEditorDrawerContext()
Expand All @@ -46,27 +45,53 @@ export default function RootStateDrawer() {
setSavedPageState(newPageState)
}

const isHeroFixedBlock =
savedPageState?.layout === "homepage" &&
savedPageState.content.length > 0 &&
savedPageState.content[0]?.type === "hero"

return (
<VStack w="100%" h="100%" gap={10} pt={10}>
{/* TODO: Fixed Blocks Section */}
<VStack w="100%" align="baseline">
<Text fontSize="xl" pl={4} fontWeight={500}>
Fixed blocks
</Text>
<Box
as="button"
onClick={() => setDrawerState({ state: "metadataEditor" })}
w="100%"
>
<HStack w="100%" py="4" bgColor="white">
<VStack w="100%" align="baseline" pl={1}>
<Text px="3" fontWeight={500}>
Page title and summary
</Text>
<Text px="3">Click to edit</Text>
</VStack>
</HStack>
</Box>

{isHeroFixedBlock ? (
<Box
as="button"
onClick={() => {
setCurrActiveIdx(0)
setDrawerState({ state: "complexEditor" })
}}
w="100%"
>
<HStack w="100%" py="4" bgColor="white">
<VStack w="100%" align="baseline" pl={1}>
<Text px="3" fontWeight={500}>
Hero banner
</Text>
<Text px="3">Title, subtitle, and Call-to-Action</Text>
</VStack>
</HStack>
</Box>
) : (
<Box
as="button"
onClick={() => setDrawerState({ state: "metadataEditor" })}
w="100%"
>
<HStack w="100%" py="4" bgColor="white">
<VStack w="100%" align="baseline" pl={1}>
<Text px="3" fontWeight={500}>
Page title and summary
</Text>
<Text px="3">Click to edit</Text>
</VStack>
</HStack>
</Box>
)}
</VStack>

<VStack justifyContent="space-between" w="100%" h="100%">
Expand All @@ -84,77 +109,80 @@ export default function RootStateDrawer() {
Custom blocks
</Text>
<Box w="100%">
{!savedPageState ||
(savedPageState.content.length === 0 && (
<VStack justifyContent="center" spacing={0} mt="2.75rem">
<BlockEditingPlaceholder />
<Text
mt="0.75rem"
textStyle="subhead-1"
color="base.content.default"
>
Blocks you add will appear here
</Text>
<Text
mt="0.25rem"
textStyle="caption-2"
color="base.content.medium"
>
Click ‘Add a new block’ below to add blocks to this
page
</Text>
</VStack>
))}
{(!savedPageState ||
(isHeroFixedBlock && savedPageState.content.length === 1) ||
savedPageState.content.length === 0) && (
<VStack justifyContent="center" spacing={0} mt="2.75rem">
<BlockEditingPlaceholder />
<Text
mt="0.75rem"
textStyle="subhead-1"
color="base.content.default"
>
Blocks you add will appear here
</Text>
<Text
mt="0.25rem"
textStyle="caption-2"
color="base.content.medium"
>
Click ‘Add a new block’ below to add blocks to this page
</Text>
</VStack>
)}

{!!savedPageState &&
savedPageState.content.map((block, index) => (
<Draggable
// TODO: Determine key + draggable id
key={index}
draggableId={`${block.type}-${index}`}
index={index}
>
{(provided) => (
<VStack
w="100%"
gap={0}
onClick={() => {
setCurrActiveIdx(index)
// TODO: we should automatically do this probably?
const nextState =
savedPageState.content[index]?.type === "prose"
? "nativeEditor"
: "complexEditor"
// NOTE: SNAPSHOT
setDrawerState({ state: nextState })
}}
>
<HStack
savedPageState.content
.slice(isHeroFixedBlock ? 1 : 0)
.map((block, index) => (
<Draggable
// TODO: Determine key + draggable id
key={index}
draggableId={`${block.type}-${index}`}
index={index}
>
{(provided) => (
<VStack
w="100%"
py="4"
bgColor="white"
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
gap={0}
onClick={() => {
setCurrActiveIdx(index)
// TODO: we should automatically do this probably?
const nextState =
savedPageState.content[index]?.type ===
"prose"
? "nativeEditor"
: "complexEditor"
// NOTE: SNAPSHOT
setDrawerState({ state: nextState })
}}
>
<Icon
as={BiGridVertical}
fontSize="1.5rem"
ml="0.75rem"
/>
<Text px="3" fontWeight={500}>
{/* NOTE: Because we use `Type.Ref` for prose, */}
{/* this gets a `$Ref` only and not the concrete values */}
{block.type === "prose"
? "Prose component"
: getComponentSchema(block.type).title}
</Text>
</HStack>
<Divider />
</VStack>
)}
</Draggable>
))}
<HStack
w="100%"
py="4"
bgColor="white"
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<Icon
as={BiGridVertical}
fontSize="1.5rem"
ml="0.75rem"
/>
<Text px="3" fontWeight={500}>
{/* NOTE: Because we use `Type.Ref` for prose, */}
{/* this gets a `$Ref` only and not the concrete values */}
{block.type === "prose"
? "Prose component"
: getComponentSchema(block.type).title}
</Text>
</HStack>
<Divider />
</VStack>
)}
</Draggable>
))}
</Box>
{provided.placeholder}
</VStack>
Expand Down

0 comments on commit be46aea

Please sign in to comment.