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 {

54
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,22 +28,45 @@ 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 ? (
<div className="flex-1 px-12 py-24 flex flex-col justify-center items-center "> <Transition show>
<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"> <Transition.Child
<Heart className="absolute" /> enter="transition-opacity ease-linear duration-300"
</span> enterFrom="opacity-0"
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center"> enterTo="opacity-100"
Your wishlist is empty leave="transition-opacity ease-linear duration-300"
</h2> leaveFrom="opacity-100"
<p className="text-accents-6 px-10 text-center pt-2"> leaveTo="opacity-0"
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. >
</p> <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
</div> <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" />
</span>
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
Your wishlist is empty
</h2>
<p className="text-accents-6 px-10 text-center pt-2">
Biscuit oat cake wafer icing ice cream tiramisu pudding
cupcake.
</p>
</div>
</Transition.Child>
</Transition>
) : ( ) : (
data && <Transition show>
data.items?.map((item) => ( {data &&
<WishlistCard key={item.id} item={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} />
</Transition.Child>
))}
</Transition>
)} )}
</div> </div>
</div> </div>