Skip to content

Commit

Permalink
feat: example page transition
Browse files Browse the repository at this point in the history
  • Loading branch information
pmelab committed Sep 14, 2023
1 parent 49c3e5b commit 91df814
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 21 deletions.
22 changes: 22 additions & 0 deletions packages/ui/src/components/Molecules/PageTransition.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react';
import { motion } from 'framer-motion';
import { PropsWithChildren } from 'react';

export function PageTransition({ children }: PropsWithChildren) {
return (
<motion.main
id="main-content"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{
type: 'spring',
mass: 0.35,
stiffness: 75,
duration: 0.3,
}}
>
{children}
</motion.main>
);
}
7 changes: 6 additions & 1 deletion packages/ui/src/components/Routes/ContentHub.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import React from 'react';

import { PageTransition } from '../Molecules/PageTransition';
import { ContentHub as ContentHubOrganism } from '../Organisms/ContentHub';

export function ContentHub(props: { pageSize: number }) {
return <ContentHubOrganism pageSize={props.pageSize} />;
return (
<PageTransition>
<ContentHubOrganism pageSize={props.pageSize} />
</PageTransition>
);
}
7 changes: 5 additions & 2 deletions packages/ui/src/components/Routes/Frame.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { AnimatePresence } from 'framer-motion';
import React, { ComponentProps, PropsWithChildren, useEffect } from 'react';

import { Messages, readMessages } from '../Molecules/Messages';
Expand All @@ -18,8 +19,10 @@ export function Frame(
<div>
<Header {...props.header} />
<main>
<Messages messages={messages} />
{props.children}
<AnimatePresence mode="wait" initial={false}>
<Messages messages={messages} />
{props.children}
</AnimatePresence>
</main>
<Footer {...props.footer} />
</div>
Expand Down
39 changes: 21 additions & 18 deletions packages/ui/src/components/Routes/Page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,36 @@ import React from 'react';

import { isTruthy } from '../../utils/isTruthy';
import { UnreachableCaseError } from '../../utils/unreachable-case-error';
import { PageTransition } from '../Molecules/PageTransition';
import { BlockForm } from '../Organisms/PageContent/BlockForm';
import { BlockMarkup } from '../Organisms/PageContent/BlockMarkup';
import { BlockMedia } from '../Organisms/PageContent/BlockMedia';
import { PageHero } from '../Organisms/PageHero';

export function Page(props: { page: PageFragment }) {
return (
<div>
{props.page.hero ? <PageHero {...props.page.hero} /> : null}
<div className="bg-white py-12 px-6 lg:px-8">
<div className="mx-auto max-w-3xl text-base leading-7 text-gray-700">
<div className="mt-10">
{props.page?.content?.filter(isTruthy).map((block, index) => {
switch (block.__typename) {
case 'BlockMedia':
return <BlockMedia key={index} {...block} />;
case 'BlockMarkup':
return <BlockMarkup key={index} {...block} />;
case 'BlockForm':
return <BlockForm key={index} {...block} />;
default:
throw new UnreachableCaseError(block);
}
})}
<PageTransition>
<div>
{props.page.hero ? <PageHero {...props.page.hero} /> : null}
<div className="bg-white py-12 px-6 lg:px-8">
<div className="mx-auto max-w-3xl text-base leading-7 text-gray-700">
<div className="mt-10">
{props.page?.content?.filter(isTruthy).map((block, index) => {
switch (block.__typename) {
case 'BlockMedia':
return <BlockMedia key={index} {...block} />;
case 'BlockMarkup':
return <BlockMarkup key={index} {...block} />;
case 'BlockForm':
return <BlockForm key={index} {...block} />;
default:
throw new UnreachableCaseError(block);
}
})}
</div>
</div>
</div>
</div>
</div>
</PageTransition>
);
}

0 comments on commit 91df814

Please sign in to comment.