cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Transition states for Wishlist

Browse Source
This commit is contained in:
Belen Curcio 2020-10-27 10:13:24 -03:00
parent 83b5c55bfb
commit 59e3d13565
2 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/wishlist/WishlistCard/WishlistCard.module.css
View File

@ -1,5 +1,5 @@
.root { .root {
@apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accents-2; @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accents-2 transition duration-100 ease-in-out;
&:nth-child(3n + 1) { &:nth-child(3n + 1) {
& .productBg { & .productBg {

30
pages/wishlist.tsx
View File

@ -6,6 +6,7 @@ import { Layout } from '@components/core'
import { Heart } from '@components/icons' import { Heart } from '@components/icons'
import { Container, Text } from '@components/ui' import { Container, Text } from '@components/ui'
import { WishlistCard } from '@components/wishlist' import { WishlistCard } from '@components/wishlist'
import { Transition } from '@headlessui/react'
export async function getStaticProps({ export async function getStaticProps({
preview, preview,
@ -27,6 +28,15 @@ export default function Wishlist() {
<Text variant="pageHeading">My Wishlist</Text> <Text variant="pageHeading">My Wishlist</Text>
<div className="group flex flex-col"> <div className="group flex flex-col">
{isEmpty ? ( {isEmpty ? (
<Transition show>
<Transition.Child
enter="transition-opacity ease-linear duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity ease-linear duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="flex-1 px-12 py-24 flex flex-col justify-center items-center "> <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
<span className="border border-dashed border-secondary rounded-full flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary"> <span className="border border-dashed border-secondary rounded-full flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
<Heart className="absolute" /> <Heart className="absolute" />
@ -35,14 +45,28 @@ export default function Wishlist() {
Your wishlist is empty Your wishlist is empty
</h2> </h2>
<p className="text-accents-6 px-10 text-center pt-2"> <p className="text-accents-6 px-10 text-center pt-2">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. Biscuit oat cake wafer icing ice cream tiramisu pudding
cupcake.
</p> </p>
</div> </div>
</Transition.Child>
</Transition>
) : ( ) : (
data && <Transition show>
{data &&
data.items?.map((item) => ( data.items?.map((item) => (
<Transition.Child
enter="transition-opacity ease-linear duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity ease-linear duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<WishlistCard key={item.id} item={item} /> <WishlistCard key={item.id} item={item} />
)) </Transition.Child>
))}
</Transition>
)} )}
</div> </div>
</div> </div>