refactor(components): rewrite Branding component

The component should only be responsible of the layout for the logo,
the name and the optional baseline. Also, the homepage url could
be different from `/` so the consumer should give the right url.

1 files changed, 0 insertions, 86 deletions

diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx
deleted file mode 100644
index 9f8e6ce..0000000
--- a/src/components/molecules/layout/branding.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { type FC, useRef, type ReactNode } from 'react';
-import { useStyles } from '../../../utils/hooks';
-import { Heading, Link } from '../../atoms';
-import { FlippingLogo } from '../images';
-import styles from './branding.module.scss';
-
-export type BrandingProps = {
-  /**
-   * The Branding baseline.
-   */
-  baseline?: string;
-  /**
-   * Use H1 if the current page is homepage. Default: false.
-   */
-  isHome?: boolean;
-  /**
-   * The website logo.
-   */
-  logo: ReactNode;
-  /**
-   * Your photo.
-   */
-  photo: ReactNode;
-  /**
-   * The Branding title;
-   */
-  title: string;
-  /**
-   * Wraps the title with a link to homepage. Default: false.
-   */
-  withLink?: boolean;
-};
-
-/**
- * Branding component
- *
- * Render the branding logo, title and optional baseline.
- */
-export const Branding: FC<BrandingProps> = ({
-  baseline,
-  isHome = false,
-  logo,
-  photo,
-  title,
-  withLink = false,
-}) => {
-  const baselineRef = useRef<HTMLParagraphElement>(null);
-  const titleRef = useRef<HTMLHeadingElement | HTMLParagraphElement>(null);
-
-  useStyles({
-    property: '--typing-animation',
-    styles: 'blink 0.7s ease-in-out 0s 2, typing 4.3s linear 0s 1',
-    target: titleRef,
-  });
-  useStyles({
-    property: '--typing-animation',
-    styles:
-      'hide-text 4.25s linear 0s 1, blink 0.8s ease-in-out 4.25s 2, typing 3.8s linear 4.25s 1',
-    target: baselineRef,
-  });
-
-  return (
-    <div className={styles.wrapper}>
-      <FlippingLogo back={logo} className={styles.logo} front={photo} />
-      <Heading
-        className={styles.title}
-        isFake={!isHome}
-        level={1}
-        ref={titleRef}
-      >
-        {withLink ? (
-          <Link className={styles.link} href="/">
-            {title}
-          </Link>
-        ) : (
-          title
-        )}
-      </Heading>
-      {baseline ? (
-        <Heading className={styles.baseline} isFake level={4} ref={baselineRef}>
-          {baseline}
-        </Heading>
-      ) : null}
-    </div>
-  );
-};