b9b89b2575
The PR activates the app router for the Blog page at /blog. Its purpose is to test Next.js changes within nx-dev, allowing us to identify and address any issues that users might encounter. Integrating these changes into our environment, we can gain firsthand experience and insights into potential problems, ensuring that the updates are robust and reliable. This approach helps us improve the overall quality and user experience of our platform by proactively identifying and resolving any issues that could affect consumers.
88 lines
2.5 KiB
TypeScript
88 lines
2.5 KiB
TypeScript
'use client';
|
|
import cx from 'classnames';
|
|
import { ReactNode, createContext, useState } from 'react';
|
|
|
|
const FlipCardContext = createContext<{
|
|
fullDate: string;
|
|
onClick?: () => void;
|
|
}>({
|
|
fullDate: '',
|
|
onClick: () => {},
|
|
});
|
|
|
|
export function FlipCard({
|
|
isFlippable,
|
|
isFlipped,
|
|
day,
|
|
fullDate,
|
|
onFlip,
|
|
onClick,
|
|
children,
|
|
}: {
|
|
isFlippable?: boolean;
|
|
isFlipped?: boolean;
|
|
onFlip?: (day: number, isFlipped: boolean) => void;
|
|
day: number;
|
|
fullDate?: string;
|
|
onClick?: () => void;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<FlipCardContext.Provider value={{ fullDate: fullDate || '', onClick }}>
|
|
<span
|
|
onClick={(event) => {
|
|
if (isFlippable && !isFlipped) {
|
|
onFlip && onFlip(day, true);
|
|
event.preventDefault();
|
|
} else {
|
|
onClick && onClick();
|
|
}
|
|
}}
|
|
className={cx(
|
|
'perspective group block',
|
|
isFlippable && !isFlipped ? 'cursor-pointer' : 'cursor-default'
|
|
)}
|
|
>
|
|
<div
|
|
className={cx(
|
|
'preserve-3d relative h-full w-full content-center rounded-lg border-2 bg-white/60 shadow-sm transition duration-200 focus-within:ring-offset-2 dark:bg-slate-800/90',
|
|
isFlippable && isFlipped
|
|
? 'my-rotate-y-180 bg-white dark:bg-slate-800'
|
|
: '',
|
|
isFlippable
|
|
? isFlipped
|
|
? 'border-blue-400 dark:border-slate-800'
|
|
: 'border-blue-400 hover:[transform:rotateY(10deg)] dark:border-slate-800'
|
|
: 'border-1 border-slate-300 dark:border-slate-800'
|
|
)}
|
|
>
|
|
<FlipCardFront>{fullDate}</FlipCardFront>
|
|
{children}
|
|
</div>
|
|
</span>
|
|
</FlipCardContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function FlipCardFront({ children }: { children: ReactNode }) {
|
|
return (
|
|
<div className="backface-hidden absolute flex h-full w-full flex-col items-center justify-center px-2 text-center text-3xl font-bold">
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function FlipCardBack({ children }: { children: ReactNode }) {
|
|
return (
|
|
<FlipCardContext.Consumer>
|
|
{() => (
|
|
<div className="my-rotate-y-180 backface-hidden h-full w-full overflow-hidden rounded-md bg-white text-3xl text-slate-900 dark:bg-slate-800 dark:text-slate-100">
|
|
<div className="p-4 text-sm sm:text-sm md:text-sm lg:text-lg">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</FlipCardContext.Consumer>
|
|
);
|
|
}
|