Skip to content

Commit

Permalink
pull
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcoskolodny
marcoskolodny committed Nov 29, 2024
2 parents 3e3d296 + f4dd900 commit 92602a2
Show file tree
Hide file tree
Showing 12 changed files with 205 additions and 246 deletions.
8 changes: 6 additions & 2 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,19 @@
content="Mistica design team"
data-react-helmet="true"
/>
<meta property="og:title" content="Wrapped 2023" data-react-helmet="true" />
<meta
property="og:title"
content="Advent calendar 2024"
data-react-helmet="true"
/>
<meta
property="og:description"
content="Mistica design team"
data-react-helmet="true"
/>
<meta
property="og:image"
content="https://mistica-design-dg8f5xdzr-aweell.vercel.app/static/media/thumbnail.bd98c1039c876d408948.png"
content="https://mistica-design-qwb4-lqrrl9njr-alex-buenos-projects.vercel.app/static/media/coming-soon.f61036da17b3da68badb.png"
data-react-helmet="true"
/>
<meta
Expand Down
218 changes: 121 additions & 97 deletions src/pages/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,21 @@ import TeamMember from "../components/teamMember";
import thumbnailWrapped2023 from "../pages/wrapped2023/assets/thumbnail.png";
import skinTool from "../img/skin-tool.png";
import AppLayout from "../components/app-layout";
import ComingSoon from "../pages/advent-calendar-2024/assets/images/coming-soon.png";
import { Helmet } from "react-helmet";

const Home = () => {
const { isDesktopOrBigger } = useScreenSize();
const { isDarkMode } = useTheme();

const projects = [
{
title: "Mística 2024",
description: "Coming soon...",
link: "/advent-calendar-2024",
buttonLabel: "Visit",
image: ComingSoon,
},
{
title: "Mistica wrapped 2023",
description:
Expand Down Expand Up @@ -175,109 +184,124 @@ const Home = () => {
];

return (
<AppLayout>
<Slideshow
inverseBullets={isDarkMode ? true : false}
withBullets
items={projects.map((project, index) => (
<Hero
headline={
<ThemeVariant isInverse>
<Tag type="active">Project</Tag>
</ThemeVariant>
}
background="alternative"
title={project.title}
description={project.description}
media={
<Image
height={"100%"}
src={project.image}
aspectRatio="4:3"
></Image>
}
buttonLink={
<ButtonLink to={project.link} newTab={true}>
{project.buttonLabel}
</ButtonLink>
}
></Hero>
))}
></Slideshow>
<>
<Helmet>
<title>Advent calendar</title>
<meta name="description" content="Coming soon..." />
<meta property="og:title" content="Advent calendar" />
<meta property="og:description" content="Coming soon..." />
<meta
property="og:image"
content="https://mistica-design-qwb4-lqrrl9njr-alex-buenos-projects.vercel.app/static/media/coming-soon.f61036da17b3da68badb.png"
/>
<meta property="twitter:title" content="Advent calendar" />
<meta property="twitter:description" content="Coming soon..." />
<meta property="twitter:card" content="summary_large_image" />
</Helmet>
<AppLayout>
<Slideshow
inverseBullets={isDarkMode ? true : false}
withBullets
items={projects.map((project, index) => (
<Hero
headline={
<ThemeVariant isInverse>
<Tag type="active">Project</Tag>
</ThemeVariant>
}
background="alternative"
title={project.title}
description={project.description}
media={
<Image
height={"100%"}
src={project.image}
aspectRatio="4:3"
></Image>
}
buttonLink={
<ButtonLink to={project.link} newTab={true}>
{project.buttonLabel}
</ButtonLink>
}
></Hero>
))}
></Slideshow>

<ResponsiveLayout>
<Box paddingY={isDesktopOrBigger ? 120 : 24}>
<Stack space={80}>
<Box paddingY={isDesktopOrBigger ? 40 : 24}>
<Stack space={48}>
<Title2>Our resources</Title2>
<ResponsiveLayout>
<Box paddingY={isDesktopOrBigger ? 120 : 24}>
<Stack space={80}>
<Box paddingY={isDesktopOrBigger ? 40 : 24}>
<Stack space={48}>
<Title2>Our resources</Title2>

<SubGrid columns={isDesktopOrBigger ? resources.length : 1}>
{resources.map((resource, index) => (
<DisplayDataCard
isInverse={resource.inverse}
key={index}
icon={
<Circle
size={40}
backgroundColor={skinVars.colors.brandLow}
>
{resource.icon}
</Circle>
}
title={resource.title}
buttonLink={
<ButtonLink href={resource.link}>
{resource.buttonLabel}
</ButtonLink>
}
/>
))}
</SubGrid>
</Stack>
</Box>

<Box paddingY={isDesktopOrBigger ? 40 : 24}>
<Stack space={48}>
<Title2>Guides</Title2>
<NegativeBox>
<RowList>
{guides.map((guide, index) => (
<Row
index={index + 1}
title={guide.title}
description={guide.description}
onPress={() => {
window.open(guide.link, "_blank");
}}
<SubGrid columns={isDesktopOrBigger ? resources.length : 1}>
{resources.map((resource, index) => (
<DisplayDataCard
isInverse={resource.inverse}
key={index}
icon={
<Circle
size={40}
backgroundColor={skinVars.colors.brandLow}
>
{resource.icon}
</Circle>
}
title={resource.title}
buttonLink={
<ButtonLink href={resource.link}>
{resource.buttonLabel}
</ButtonLink>
}
/>
))}
</RowList>
</NegativeBox>
</Stack>
</Box>
</SubGrid>
</Stack>
</Box>

<Box paddingY={isDesktopOrBigger ? 40 : 24}>
<Stack space={48}>
<Title2>Guides</Title2>
<NegativeBox>
<RowList>
{guides.map((guide, index) => (
<Row
index={index + 1}
title={guide.title}
description={guide.description}
onPress={() => {
window.open(guide.link, "_blank");
}}
/>
))}
</RowList>
</NegativeBox>
</Stack>
</Box>

<Box paddingY={isDesktopOrBigger ? 40 : 24}>
<Stack space={48}>
<Title2>Meet the team</Title2>
<Box paddingY={isDesktopOrBigger ? 40 : 24}>
<Stack space={48}>
<Title2>Meet the team</Title2>

<SubGrid columns={isDesktopOrBigger ? 2 : 1} gap={48}>
{team.map((member, index) => (
<TeamMember
key={index}
name={member.name}
description={member.description}
src={member.src}
src2={member.src2}
></TeamMember>
))}
</SubGrid>
</Stack>
</Box>
</Stack>
</Box>
</ResponsiveLayout>
</AppLayout>
<SubGrid columns={isDesktopOrBigger ? 2 : 1} gap={48}>
{team.map((member, index) => (
<TeamMember
key={index}
name={member.name}
description={member.description}
src={member.src}
src2={member.src2}
></TeamMember>
))}
</SubGrid>
</Stack>
</Box>
</Stack>
</Box>
</ResponsiveLayout>
</AppLayout>
</>
);
};

Expand Down
Binary file added src/pages/advent-calendar-2024/assets/images/coming-soon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 28 additions & 26 deletions src/pages/advent-calendar-2024/components/calendar-card.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
Text,
Text5,
} from "@telefonica/mistica";
import { useRef, useState } from "react";
import { useRef, useState, useEffect } from "react";
import { IconCompleted, IconLockOpen } from "../assets/icons/icons";
import { CARD_STATES } from "../utils/constants";
import styles from "./calendar-card.module.css";
Expand All @@ -26,36 +26,37 @@ const CalendarCard = ({
repeatable,
}) => {
const [isHovered, setIsHovered] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false);
const dialogRef = useRef(null);
const day = new Date(DateString).getDate();
const today = new Date().getDate();
const isRepeatable =
repeatable &&
DateString === today &&
(status === CARD_STATES.AVAILABLE || status === CARD_STATES.COMPLETED);
const isRepeatable = repeatable && DateString === today;

const handleClick = () => {
if (status === CARD_STATES.AVAILABLE || isRepeatable) {
dialogRef.current.showModal();
document.body.style.overflow = "hidden";
setIsModalOpen((prev) => !prev); // Toggle modal state
}
};

// Effect to show the modal when `isModalOpen` is true
useEffect(() => {
if (isModalOpen) {
dialogRef.current?.showModal();
}
}, [isModalOpen]);

const handleEndDay = () => {
dialogRef.current.close();
document.body.style.overflow = "auto";
onEndDay(); // Notify the parent to update the state
};

const handleCloseModal = () => {
dialogRef.current.close(); // Close the modal
document.body.style.overflow = "auto";
onEndDay(); // Notify the parent to update the state
};

const handleDismiss = () => {
dialogRef.current.close();
document.body.style.overflow = "auto";
};

let cardStatusStyles;
Expand Down Expand Up @@ -155,7 +156,7 @@ const CalendarCard = ({
style={{
cursor:
status !== CARD_STATES.AVAILABLE && !isRepeatable
? "not-allowed"
? "inherit"
: "pointer",

padding: 24,
Expand Down Expand Up @@ -202,7 +203,6 @@ const CalendarCard = ({
}
>
{DayOfWeek}
{isRepeatable && "isRepeatable"}
</Text5>

<StatusIndicator />
Expand Down Expand Up @@ -236,20 +236,22 @@ const CalendarCard = ({
</Inline>
</Stack>
</button>
<ModalView
ref={dialogRef}
day={day}
dayOfWeek={DayOfWeek}
title={eventName}
description={eventDescription}
content={
typeof content === "function"
? content({ closeModal: handleCloseModal })
: content
}
onClose={handleEndDay}
onCancel={repeatable ? handleEndDay : handleDismiss}
/>
{isModalOpen && (
<ModalView
ref={dialogRef}
day={day}
dayOfWeek={DayOfWeek}
title={eventName}
description={eventDescription}
content={
typeof content === "function"
? content({ closeModal: handleCloseModal })
: content
}
onClose={handleEndDay}
onCancel={repeatable ? handleEndDay : handleDismiss}
/>
)}
</>
);
};
Expand Down
1 change: 1 addition & 0 deletions src/pages/advent-calendar-2024/components/game-bar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const GameBar = ({ score, time, timeRunning, movements }) => {
left: isMobile ? 0 : 56,
top: isMobile ? 0 : 56,
marginBottom: isMobile ? 24 : 0,
zIndex: 2,
}}
>
<Score
Expand Down
Loading

0 comments on commit 92602a2

Please sign in to comment.