Skip to content

Commit

Permalink
feat: adds a couple of Hero layouts
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghoshnirmalya
ghoshnirmalya committed Dec 29, 2020
1 parent f98e9c1 commit fce5325
Show file tree
Hide file tree
Showing 20 changed files with 334 additions and 36 deletions.
2 changes: 1 addition & 1 deletion packages/builder/components/color-picker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const ColorPicker: FC<IProps> = ({ color, onChange }) => {
rounded="lg"
onClick={() => setPickerVisibility(true)}
>
<Box bg={color} h={8} w={16} rounded="lg" borderWidth={1} />
<Box bg={color} h={8} w={8} rounded="lg" borderWidth={1} />
<Text>{color}</Text>
</HStack>
</PopoverTrigger>
Expand Down
1 change: 1 addition & 0 deletions packages/builder/components/editor/sections/features/panels/colors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const FeaturesSectionEditorColorsPanel: FC<IProps> = ({
const handleChange = (itemType: string, value: string) => {
dispatch(
updateTemplateSectionTheme({
currentPageId,
positionOfSection,
key: itemType,
value,
Expand Down
12 changes: 7 additions & 5 deletions packages/builder/components/editor/sections/features/panels/layouts.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Flex, VStack } from "@chakra-ui/react";
import Image from "next/image";
import { Flex, Image, VStack } from "@chakra-ui/react";
import React, { FC } from "react";
import { useDispatch } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import { getCurrentPageData } from "selectors/site";
import { updateTemplateSectionMeta } from "slices/site";

interface IProps {
Expand All @@ -12,10 +12,12 @@ const FeaturesSectionEditorLayoutsPanel: FC<IProps> = ({
positionOfSection,
}) => {
const dispatch = useDispatch();
const currentPageId = useSelector(getCurrentPageData());

const handleChange = (layoutId: string) => {
dispatch(
updateTemplateSectionMeta({
currentPageId,
positionOfSection,
itemType: "layout",
value: layoutId,
Expand Down Expand Up @@ -43,15 +45,15 @@ const FeaturesSectionEditorLayoutsPanel: FC<IProps> = ({
onClick={() => handleChange(layout.key)}
borderWidth={1}
alignItems="center"
rounded="lg"
_hover={{
shadow: "lg",
}}
>
<Image
src={`/images/section-layouts/features/${index + 1}.png`}
alt={`Layout ${layout.key}`}
width={533}
height={190}
rounded="lg"
/>
</Flex>
);
Expand Down
1 change: 1 addition & 0 deletions packages/builder/components/editor/sections/features/panels/text.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const FeaturesSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
const handleMetaChange = (itemType: string, value: string) => {
dispatch(
updateTemplateSectionMeta({
currentPageId,
positionOfSection,
itemType,
value,
Expand Down
1 change: 1 addition & 0 deletions packages/builder/components/editor/sections/footer/panels/colors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const FooterSectionEditorColorsPanel: FC<IProps> = ({ positionOfSection }) => {
const handleChange = (itemType: string, value: string) => {
dispatch(
updateTemplateSectionTheme({
currentPageId,
positionOfSection,
key: itemType,
value,
Expand Down
1 change: 1 addition & 0 deletions packages/builder/components/editor/sections/hero/panels/colors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const HeroSectionEditorColorsPanel: FC<IProps> = ({ positionOfSection }) => {
const handleChange = (itemType: string, value: string) => {
dispatch(
updateTemplateSectionTheme({
currentPageId,
positionOfSection,
key: itemType,
value,
Expand Down
20 changes: 15 additions & 5 deletions packages/builder/components/editor/sections/hero/panels/layouts.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Flex, VStack } from "@chakra-ui/react";
import Image from "next/image";
import { Flex, Image, VStack } from "@chakra-ui/react";
import React, { FC } from "react";
import { useDispatch } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import { getCurrentPageData } from "selectors/site";
import { updateTemplateSectionMeta } from "slices/site";

interface IProps {
Expand All @@ -10,10 +10,12 @@ interface IProps {

const HeroSectionEditorLayoutsPanel: FC<IProps> = ({ positionOfSection }) => {
const dispatch = useDispatch();
const currentPageId = useSelector(getCurrentPageData());

const handleChange = (layoutId: string) => {
dispatch(
updateTemplateSectionMeta({
currentPageId,
positionOfSection,
itemType: "layout",
value: layoutId,
Expand All @@ -31,6 +33,14 @@ const HeroSectionEditorLayoutsPanel: FC<IProps> = ({ positionOfSection }) => {
key: "two",
label: "Second layout",
},
{
key: "three",
label: "Third layout",
},
{
key: "four",
label: "Four layout",
},
];

return layouts.map((layout: any, index: number) => {
Expand All @@ -41,15 +51,15 @@ const HeroSectionEditorLayoutsPanel: FC<IProps> = ({ positionOfSection }) => {
onClick={() => handleChange(layout.key)}
borderWidth={1}
alignItems="center"
rounded="lg"
_hover={{
shadow: "lg",
}}
>
<Image
src={`/images/section-layouts/hero/${index + 1}.png`}
alt={`Layout ${layout.key}`}
width={533}
height={160}
rounded="lg"
/>
</Flex>
);
Expand Down
1 change: 1 addition & 0 deletions packages/builder/components/editor/sections/hero/panels/text.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const HeroSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
const handleMetaChange = (itemType: string, value: string) => {
dispatch(
updateTemplateSectionMeta({
currentPageId,
positionOfSection,
itemType,
value,
Expand Down
1 change: 1 addition & 0 deletions packages/builder/components/editor/sections/navbar/panels/colors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const NavbarSectionEditorColorsPanel: FC<IProps> = ({ positionOfSection }) => {
const handleChange = (itemType: string, value: string) => {
dispatch(
updateTemplateSectionTheme({
currentPageId,
positionOfSection,
key: itemType,
value,
Expand Down
12 changes: 7 additions & 5 deletions packages/builder/components/editor/sections/navbar/panels/layouts.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Flex, VStack } from "@chakra-ui/react";
import Image from "next/image";
import { Flex, Image, VStack } from "@chakra-ui/react";
import React, { FC } from "react";
import { useDispatch } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import { getCurrentPageData } from "selectors/site";
import { updateTemplateSectionMeta } from "slices/site";

interface IProps {
Expand All @@ -10,10 +10,12 @@ interface IProps {

const NavbarSectionEditorLayoutsPanel: FC<IProps> = ({ positionOfSection }) => {
const dispatch = useDispatch();
const currentPageId = useSelector(getCurrentPageData());

const handleChange = (layoutId: string) => {
dispatch(
updateTemplateSectionMeta({
currentPageId,
positionOfSection,
itemType: "layout",
value: layoutId,
Expand Down Expand Up @@ -41,15 +43,15 @@ const NavbarSectionEditorLayoutsPanel: FC<IProps> = ({ positionOfSection }) => {
onClick={() => handleChange(layout.key)}
borderWidth={1}
alignItems="center"
rounded="lg"
_hover={{
shadow: "lg",
}}
>
<Image
src={`/images/section-layouts/navbar/${index + 1}.png`}
alt={`Layout ${layout.key}`}
width={533}
height={30}
rounded="lg"
/>
</Flex>
);
Expand Down
10 changes: 2 additions & 8 deletions packages/builder/components/pages/index/right-sidebar/tabs/templates.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Box, Text, useColorModeValue, VStack } from "@chakra-ui/react";
import { Box, Image, Text, useColorModeValue, VStack } from "@chakra-ui/react";
import rainbowTemplateData from "data/templates/rainbow";
import unoTemplateData from "data/templates/uno";
import Image from "next/image";
import React, { FC } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getCurrentPageData } from "selectors/site";
Expand Down Expand Up @@ -58,12 +57,7 @@ const RightSidebarTemplatesTab: FC = () => {
shadow: "lg",
}}
>
<Image
src={template.image}
alt={template.label}
width={466.76}
height={450}
/>
<Image src={template.image} alt={template.label} rounded="lg" />
<Text p={1} borderTopWidth={1} fontWeight="bold">
{template.label}
</Text>
Expand Down
12 changes: 4 additions & 8 deletions packages/builder/components/pages/index/survey/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import {
Container,
Grid,
Heading,
Image,
Text,
useColorModeValue,
VStack,
} from "@chakra-ui/react";
import rainbowTemplateData from "data/templates/rainbow";
import unoTemplateData from "data/templates/uno";
import Image from "next/image";
import React, { FC } from "react";
import { useDispatch } from "react-redux";
import { addPage, setTemplateData } from "slices/site";
Expand Down Expand Up @@ -70,16 +70,12 @@ const Survey: FC = () => {
borderWidth={1}
alignItems="center"
bg={bgColor}
rounded="lg"
_hover={{
shadow: "lg",
}}
>
<Image
src={template.image}
alt={template.label}
width={440}
height={440}
/>
<Image src={template.image} alt={template.label} rounded="lg" />
<Text p={4} borderTopWidth={1} fontWeight="bold">
{template.label}
</Text>
Expand All @@ -91,7 +87,7 @@ const Survey: FC = () => {
return (
<Container maxW="4xl">
<VStack spacing={4}>
<Heading fontSize="3xl">Templates</Heading>
<Heading fontSize="3xl">Get started</Heading>
<Text>Click to select your preferred template and continue</Text>
<Grid templateColumns="repeat(2, 1fr)" gap={8} w="100%" p={8}>
{templateNode()}
Expand Down
6 changes: 6 additions & 0 deletions packages/builder/components/views/sections/hero/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@ const HeroSectionView: FC<IProps> = ({ positionOfSection, pageId }) => {
case "two":
return <HeroLayouts.Two theme={theme} data={data} meta={meta} />;

case "three":
return <HeroLayouts.Three theme={theme} data={data} meta={meta} />;

case "four":
return <HeroLayouts.Four theme={theme} data={data} meta={meta} />;

default:
break;
}
Expand Down
Binary file added packages/builder/public/images/section-layouts/hero/3.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/builder/public/images/section-layouts/hero/4.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

1 comment on commit fce5325

@vercel
Copy link

@vercel vercel bot commented on fce5325 Dec 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.