From d75b9a1e150ab211c1052fb49bede9bd16320aca Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 7 Oct 2023 18:44:14 +0200 Subject: feat(components): add a generic Flip component The flipping animation is used at several places so it makes sense to use a single component to handle the animation. It will avoid styles duplication. --- src/components/molecules/images/flipping-logo.tsx | 63 ----------------------- 1 file changed, 63 deletions(-) delete mode 100644 src/components/molecules/images/flipping-logo.tsx (limited to 'src/components/molecules/images/flipping-logo.tsx') diff --git a/src/components/molecules/images/flipping-logo.tsx b/src/components/molecules/images/flipping-logo.tsx deleted file mode 100644 index 703d5d6..0000000 --- a/src/components/molecules/images/flipping-logo.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import NextImage, { type ImageProps } from 'next/image'; -import { - type ForwardedRef, - forwardRef, - type ForwardRefRenderFunction, -} from 'react'; -import { Logo, type LogoProps } from '../../atoms'; -import styles from './flipping-logo.module.scss'; - -export type FlippingLogoProps = { - /** - * Set additional classnames to the logo wrapper. - */ - className?: string; - /** - * Photo alternative text. - */ - altText: string; - /** - * Logo image title. - */ - logoTitle?: LogoProps['heading']; - /** - * Photo url. - */ - photo: ImageProps['src']; -}; - -const FlippingLogoWithRef: ForwardRefRenderFunction< - HTMLDivElement, - FlippingLogoProps -> = ( - { className = '', altText, logoTitle, photo, ...props }, - ref: ForwardedRef -) => { - const wrapperClass = `${styles.logo} ${className}`; - const size = 100; - - return ( -
-
- -
-
- -
-
- ); -}; - -/** - * FlippingLogo component - * - * Render a logo and a photo with a flipping effect. - */ -export const FlippingLogo = forwardRef(FlippingLogoWithRef); -- cgit v1.2.3