first commit

components/logo/index.tsx

@@ -0,0 +1 @@
+export * from './logo';

components/logo/logo.module.css

@@ -0,0 +1,31 @@
+.logo {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+}
+  
+.vertical {
+    flex-direction: column;
+}
+  
+.icon {
+    width: 60px;
+}
+  
+.title {
+    font-weight: 800;
+    font-size: 1.75rem;
+}
+  
+@media screen and (max-width: 640px) {
+    .logo {
+      gap: 8px;
+    }
+    .icon {
+      width: 40px;
+    }
+    .title {
+      font-size: 1.25rem;
+    }
+}

components/logo/logo.tsx

@@ -0,0 +1,57 @@
+import { clsx } from 'clsx';
+import styles from './logo.module.css';
+import LogoSVG from '@/assets/images/logo-alt.svg';
+import useLocale, { LocalesMap } from '@/utils/useLocale';
+
+export enum LogoType {
+  Full,
+  Title,
+  Icon,
+}
+export enum Orientation {
+  Horizontal,
+  Vertical,
+}
+
+type LogoProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HTMLDivElement
+> & {
+  orientation?: Orientation;
+  variant?: LogoType;
+};
+
+const localesMap: LocalesMap = {
+  ru: {
+    title: 'ridebus',
+  },
+  en: {
+    title: 'ridebus',
+  },
+};
+
+export function Logo(props: LogoProps) {
+  const {
+    orientation = Orientation.Horizontal,
+    variant = LogoType.Full,
+    className: restClassName,
+    ...restProps
+  } = props;
+  const t = useLocale(localesMap);
+
+  return (
+    <div
+      className={clsx(
+        restClassName,
+        styles.logo,
+        orientation === Orientation.Vertical && styles.vertical
+      )}
+      {...restProps}
+    >
+      {variant !== LogoType.Title && <LogoSVG className={styles.icon} />}
+      {variant !== LogoType.Icon && (
+        <h1 className={styles.title}>{t('title')}</h1>
+      )}
+    </div>
+  );
+}