!(function (e) { e.languages.pug = { comment: { pattern: /(^([\t ]*))\/\/.*(?:(?:\r?\n|\r)\2[\t ].+)*/m, lookbehind: !0, }, 'multiline-script': { pattern: /(^([\t ]*)script\b.*\.[\t ]*)(?:(?:\r?\n|\r(?!\n))(?:\2[\t ].+|\s*?(?=\r?\n|\r)))+/m, lookbehind: !0, inside: e.languages.javascript, }, filter: { pattern: /(^([\t ]*)):.+(?:(?:\r?\n|\r(?!\n))(?:\2[\t ].+|\s*?(?=\r?\n|\r)))+/m, lookbehind: !0, inside: { 'filter-name': { pattern: /^:[\w-]+/, alias: 'variable' }, text: /\S[\s\S]*/, }, }, 'multiline-plain-text': { pattern: /(^([\t ]*)[\w\-#.]+\.[\t ]*)(?:(?:\r?\n|\r(?!\n))(?:\2[\t ].+|\s*?(?=\r?\n|\r)))+/m, lookbehind: !0, }, markup: { pattern: /(^[\t ]*)<.+/m, lookbehind: !0, inside: e.languages.markup, }, doctype: { pattern: /((?:^|\n)[\t ]*)doctype(?: .+)?/, lookbehind: !0 }, 'flow-control': { pattern: /(^[\t ]*)(?:case|default|each|else|if|unless|when|while)\b(?: .+)?/m, lookbehind: !0, inside: { each: { pattern: /^each .+? in\b/, inside: { keyword: /\b(?:each|in)\b/, punctuation: /,/ }, }, branch: { pattern: /^(?:case|default|else|if|unless|when|while)\b/, alias: 'keyword', }, rest: e.languages.javascript, }, }, keyword: { pattern: /(^[\t ]*)(?:append|block|extends|include|prepend)\b.+/m, lookbehind: !0, }, mixin: [ { pattern: /(^[\t ]*)mixin .+/m, lookbehind: !0, inside: { keyword: /^mixin/, function: /\w+(?=\s*\(|\s*$)/, punctuation: /[(),.]/, }, }, { pattern: /(^[\t ]*)\+.+/m, lookbehind: !0, inside: { name: { pattern: /^\+\w+/, alias: 'function' }, rest: e.languages.javascript, }, }, ], script: { pattern: /(^[\t ]*script(?:(?:&[^(]+)?\([^)]+\))*[\t ]).+/m, lookbehind: !0, inside: e.languages.javascript, }, 'plain-text': { pattern: /(^[\t ]*(?!-)[\w\-#.]*[\w\-](?:(?:&[^(]+)?\([^)]+\))*\/?[\t ]).+/m, lookbehind: !0, }, tag: { pattern: /(^[\t ]*)(?!-)[\w\-#.]*[\w\-](?:(?:&[^(]+)?\([^)]+\))*\/?:?/m, lookbehind: !0, inside: { attributes: [ { pattern: /&[^(]+\([^)]+\)/, inside: e.languages.javascript }, { pattern: /\([^)]+\)/, inside: { 'attr-value': { pattern: /(=\s*(?!\s))(?:\{[^}]*\}|[^,)\r\n]+)/, lookbehind: !0, inside: e.languages.javascript, }, 'attr-name': /[\w-]+(?=\s*!?=|\s*[,)])/, punctuation: /[!=(),]+/, }, }, ], punctuation: /:/, 'attr-id': /#[\w\-]+/, 'attr-class': /\.[\w\-]+/, }, }, code: [ { pattern: /(^[\t ]*(?:-|!?=)).+/m, lookbehind: !0, inside: e.languages.javascript, }, ], punctuation: /[.\-!=|]+/, }; for ( var t = [ { filter: 'atpl', language: 'twig' }, { filter: 'coffee', language: 'coffeescript' }, 'ejs', 'handlebars', 'less', 'livescript', 'markdown', { filter: 'sass', language: 'scss' }, 'stylus', ], n = {}, a = 0, i = t.length; a < i; a++ ) { var r = t[a]; (r = 'string' == typeof r ? { filter: r, language: r } : r), e.languages[r.language] && (n['filter-' + r.filter] = { pattern: RegExp( '(^([\t ]*)):(?:(?:\r?\n|\r(?!\n))(?:\\2[\t ].+|\\s*?(?=\r?\n|\r)))+'.replace( '', function () { return r.filter; } ), 'm' ), lookbehind: !0, inside: { 'filter-name': { pattern: /^:[\w-]+/, alias: 'variable' }, text: { pattern: /\S[\s\S]*/, alias: [r.language, 'language-' + r.language], inside: e.languages[r.language], }, }, }); } e.languages.insertBefore('pug', 'filter', n); })(Prism); 5'>15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 
import Logo, { type LogoProps } from '@components/atoms/images/logo';
import Image from 'next/image';
import { FC } from 'react';
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['title'];
  /**
   * Photo url.
   */
  photo: string;
};

/**
 * FlippingLogo component
 *
 * Render a logo and a photo with a flipping effect.
 */
const FlippingLogo: FC<FlippingLogoProps> = ({
  className = '',
  altText,
  logoTitle,
  photo,
  ...props
}) => {
  return (
    <div className={`${styles.logo} ${className}`}>
      <div className={styles.logo__front}>
        <Image
          src={photo}
          alt={altText}
          layout="fill"
          objectFit="cover"
          {...props}
        />
      </div>
      <div className={styles.logo__back}>
        <Logo title={logoTitle} />
      </div>
    </div>
  );
};

export default FlippingLogo;