Skip to content

Commit

Permalink
Merge pull request #173 from joaom00/horizontal-layout
Browse files Browse the repository at this point in the history 
Animação no layout horizontal
  • Loading branch information
@flaviojmendes
flaviojmendes committed Jan 4, 2023
2 parents 67cd013 + df91ec2 commit 732f1c5
Show file tree
Hide file tree
Showing 8 changed files with 633 additions and 444 deletions.
124 changes: 58 additions & 66 deletions src/components/HorizontalRoadmap/HorizontalLevelItem/HorizontalLevelItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,81 +1,73 @@
import { CheckIcon } from "@chakra-ui/icons";
import { motion } from "framer-motion";
import { FaRegCircle } from "react-icons/fa";
import { Level, RoadmapItem } from "../../../entity/RoadmapModel";
import {
useLevelRoadmapActions,
useSelectedItem,
} from "../LevelProvider/LevelProvider";

type Props = {
type HorizontalLevelItemsProps = {
roadmapLevel?: Level;
index: number;
levelsQty: number;
handleSelectItem: (item: RoadmapItem) => void;
isAllContentRead: (label: string, contentLength: number) => boolean;
checkAllContent: (label: string, check: boolean) => void;
selectedItem?: RoadmapItem;
};

export default function HorizontalLevelItem(props: Props) {
export default function HorizontalLevelItems(props: HorizontalLevelItemsProps) {
return (
<>
<div className="text-yellow txt-title text-xl text-center">
<motion.div key={props.index} initial={{ x: 100 }} animate={{ x: 0 }}>
<p className="text-yellow txt-title text-xl text-center">
{props.roadmapLevel?.label}
</div>
<div className="text-yellow txt-title mt-2 text-center">
</p>
<p className="text-yellow txt-title mt-2 text-center">
{props.roadmapLevel?.description}
</div>
</p>
<div className="flex xl:flex-col flex-wrap gap-2">
{props.roadmapLevel?.items.map((item, index) => {
return (
<>
<div
onClick={() => {
props.handleSelectItem(item);
}}
className={`border-2 flex w-fit xl:w-full bg-light-brown border-red p-2 xl:p-4 pl-1 cursor-pointer hover:bg-white rounded-md ${
props.selectedItem?.label === item.label ? "bg-white" : ""
}`}
>
{props.isAllContentRead(
item.label,
item.children?.length || -1
) ? (
<span className="checking">
<CheckIcon
m="auto"
mx="1"
color={"#228B22"}
onClick={(e) => {
props.checkAllContent(
item.label,
!props.isAllContentRead(
item.label,
item.children?.length || -1
)
);
e.stopPropagation();
}}
/>
</span>
) : (
<FaRegCircle
className="m-auto mx-1 hover:text-light-orange hover: hover:fill-light-orange checking"
onClick={(e) => {
props.checkAllContent(
item.label,
!props.isAllContentRead(
item.label,
item.children?.length || -1
)
);
e.stopPropagation();
}}
/>
)}
<p className="ml-1 xl:ml-2 txt-title text-xl flex-grow">{item.label}</p>
<p className="txt-title text-xl">{">>"}</p>
</div>
</>
);
})}
{props.roadmapLevel?.items.map((item, index) => (
<HorizontalLevelItem key={index} item={item} />
))}
</div>
</>
</motion.div>
);
}

type HorizontalLevelItemProps = {
item: RoadmapItem;
};

function HorizontalLevelItem({ item }: HorizontalLevelItemProps) {
const { isAllContentRead, checkAllContent } = useLevelRoadmapActions(item);
const [selectedItem, setSelectedItem] = useSelectedItem();

return (
<button
onClick={() => setSelectedItem(item)}
className={`border-2 flex w-fit xl:w-full border-red p-2 xl:p-4 pl-1 cursor-pointer hover:bg-white rounded-md ${
selectedItem?.label === item.label ? "bg-white" : "bg-light-brown"
}`}
>
{isAllContentRead() ? (
<span className="checking">
<CheckIcon
m="auto"
mx="1"
color="#228B22"
onClick={(e) => {
checkAllContent(false);
e.stopPropagation();
}}
/>
</span>
) : (
<FaRegCircle
className="m-auto mx-1 hover:text-light-orange hover: hover:fill-light-orange checking"
onClick={(e) => {
checkAllContent(true);
e.stopPropagation();
}}
/>
)}
<p className="ml-1 xl:ml-2 txt-title text-xl flex-grow">{item.label}</p>
<p className="txt-title text-xl">{">>"}</p>
</button>
);
}
96 changes: 96 additions & 0 deletions src/components/HorizontalRoadmap/HorizontalLevelItemContent/HorizontalLevelItemContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Badge, Box, Checkbox, Flex, Spacer } from "@chakra-ui/react";
import { motion } from "framer-motion";
import { RoadmapItem } from "../../../entity/RoadmapModel";
import { getColorFromContentType } from "../../../support/contentType";
import { useSectionRoadmapActions, useSelectedItem } from "../LevelProvider/LevelProvider";

export function HorizontalLevelItemContent() {
const [selectedItem] = useSelectedItem();

return (
<>
{!selectedItem && (
<div className="flex h-full ">
<p className="m-auto txt-title text-red">
Selecione um Item à esquerda para estudar.
</p>
</div>
)}

{selectedItem && (
<motion.div
key={selectedItem.label}
initial={{ y: 50, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ type: "spring", bounce: 0, duration: 0.3 }}
className="flex flex-col px-4"
>
<h2 className="txt-title text-2xl text-light-orange">
{selectedItem.label}
</h2>
<p className="txt-title text-xl text-light-orange mt-2">
{selectedItem.description}
</p>
<Accordion className="mt-4" allowToggle>
{selectedItem?.children?.map((section, index) => (
<HorizontalLevelItemSection
key={section.label + index}
section={section}
/>
))}
</Accordion>
</motion.div>
)}
</>
);
}

function HorizontalLevelItemSection({ section }: { section: RoadmapItem }) {
const { isRead, saveRead } = useSectionRoadmapActions(section);

return (
<AccordionItem>
<h2 className="font-semibold">
<AccordionButton color="#e9dad5">
<Box flex="1" textAlign="left">
<Checkbox
className="my-auto mr-2"
size="lg"
isChecked={isRead()}
onChange={(e) => saveRead(e.target.checked)}
/>
<span className="text-light-brown txt-title">{section.label}</span>
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
{section.links?.length
? section.links?.map((link) => (
<Flex className="my-2">
<a
href={link.url}
target="_blank"
className="text-light-brown hover:underline"
>
{link.label}
</a>
<Spacer />
<Badge
colorScheme={getColorFromContentType(link.contentType)}
p={1}
rounded={"md"}
className="h-5"
fontSize="0.6em"
mr="1"
cursor={"default"}
>
<span>{link.contentType ? link.contentType : null}</span>
</Badge>
</Flex>
))
: "Ainda não possuimos conteúdo."}
</AccordionPanel>
</AccordionItem>
);
}
Loading

1 comment on commit 732f1c5

@vercel
Copy link

@vercel vercel bot commented on 732f1c5 Jan 4, 2023

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:

trilhadev – ./

trilhadev-git-main-flaviojmendes.vercel.app
trilha.info
www.trilha.info
trilhadev-flaviojmendes.vercel.app
trilhadev.vercel.app

Please sign in to comment.