- Добавил компонент заголовка PageTitle, заголовок

с подложкой переименовал в СustomPageTitle - Добавил tag main в компонент PublicLayout
Timur233 · Sep 27, 2024 · 49256d3 · 49256d3
1 parent 7bffb22
commit 49256d3
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 106 deletions.
diff --git a/packages/client/src/components/ui/CustomPageTitle/CustomPageTitle.scss b/packages/client/src/components/ui/CustomPageTitle/CustomPageTitle.scss
@@ -0,0 +1,120 @@
+@import '../../../scss/vars';
+
+@mixin decorParentPosition {
+  position: absolute;
+  top: -$border-width;
+  left: -$border-width;
+  right: -$border-width;
+  bottom: -$border-width;
+}
+
+$bg-color: #1e1e1e;
+$border-width: 7px;
+$border-gradient: linear-gradient(45deg, #414243, #7f7f7f) top left,
+  linear-gradient(135deg, #7f7f7f, #414243) top right,
+  linear-gradient(225deg, #414243, #414042) bottom right,
+  linear-gradient(315deg, #414042, #414243) bottom left;
+$border-radius: 24px;
+$block-width: 350px;
+$outline-color: #101010;
+
+.custom-page-title {
+  position: relative;
+  display: flex;
+  justify-content: center;
+
+  &__block {
+    position: relative;
+    display: block;
+    border-radius: $border-radius;
+    z-index: 0;
+    width: $block-width;
+    max-width: 100%;
+  }
+
+  &__border {
+    @mixin borderDecorSettings($top, $bottom) {
+      content: '';
+      position: absolute;
+      top: $top;
+      bottom: $bottom;
+      left: 0;
+      right: 0;
+      height: $border-width;
+
+      background: url('@/assets/images/svg/title-decor.svg') no-repeat center
+        center;
+      background-size: contain;
+    }
+
+    @include decorParentPosition();
+
+    border-radius: $border-radius;
+    background: $border-gradient;
+    background-size: 50% 50%;
+    background-repeat: no-repeat;
+    z-index: -1;
+    padding: 10px;
+    outline: 3px solid $outline-color;
+
+    &::before {
+      @include borderDecorSettings(0, 'auto');
+    }
+
+    &::after {
+      @include borderDecorSettings('auto', 0);
+
+      transform: rotate(180deg);
+    }
+  }
+
+  &__screws {
+    @mixin screwSettings($left, $right) {
+      content: '';
+      position: absolute;
+      left: $left;
+      right: $right;
+      top: 50%;
+      width: 33px;
+      height: 41px;
+      z-index: -2;
+    }
+
+    @include decorParentPosition();
+
+    &::before {
+      @include screwSettings(0, 'auto');
+
+      transform: translate(calc(-100%), -50%) rotate(180deg);
+      background: url('@/assets/images/svg/title-decor--bolt.svg') no-repeat
+        center center;
+      background-size: contain;
+    }
+
+    &::after {
+      @include screwSettings('auto', 0);
+
+      transform: translate(calc(100%), -50%);
+      background: url('@/assets/images/svg/title-decor--bolt.svg') no-repeat
+        center center;
+      background-size: contain;
+    }
+  }
+
+  &__content {
+    border-radius: calc($border-radius - 6px);
+    border: 1px solid $primary-color;
+    background-color: $bg-color;
+    text-align: center;
+    color: $text-color;
+    padding: 12px;
+
+    & > * {
+      font-size: 24px;
+      font-weight: 700;
+      letter-spacing: 1px;
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
diff --git a/packages/client/src/components/ui/CustomPageTitle/CustomPageTitle.tsx b/packages/client/src/components/ui/CustomPageTitle/CustomPageTitle.tsx
@@ -0,0 +1,34 @@
+import './CustomPageTitle.scss'
+import React from 'react'
+
+type PageTitlePropsType = {
+  text: string
+  className?: string
+  tagName?: string
+}
+
+type DynamicTagElementPropsType = {
+  tagName: string
+  children: React.ReactNode
+}
+
+export const CustomPageTitle = (props: PageTitlePropsType) => {
+  const { text, className = '', tagName = 'h2' } = props
+  const DynamicTagElement = ({
+    tagName,
+    children,
+  }: DynamicTagElementPropsType) => React.createElement(tagName, null, children)
+
+  return (
+    <div className={`custom-page-title ${className}`}>
+      <div className="custom-page-title__block">
+        <div className="custom-page-title__border"></div>
+        <div className="custom-page-title__screws"></div>
+
+        <div className="custom-page-title__content">
+          <DynamicTagElement tagName={tagName}>{text}</DynamicTagElement>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/client/src/components/ui/PageTitle/PageTitle.scss b/packages/client/src/components/ui/PageTitle/PageTitle.scss
@@ -1,118 +1,24 @@
 @import '../../../scss/vars';
 
-@mixin decorParentPosition {
-  position: absolute;
-  top: -$border-width;
-  left: -$border-width;
-  right: -$border-width;
-  bottom: -$border-width;
-}
-
-$bg-color: #1e1e1e;
-$border-width: 7px;
-$border-gradient: linear-gradient(45deg, #414243, #7f7f7f) top left,
-  linear-gradient(135deg, #7f7f7f, #414243) top right,
-  linear-gradient(225deg, #414243, #414042) bottom right,
-  linear-gradient(315deg, #414042, #414243) bottom left;
-$border-radius: 24px;
-$block-width: 350px;
-$outline-color: #101010;
-
 .page-title {
   position: relative;
-  display: flex;
-  justify-content: center;
+  display: block;
+  margin-bottom: 28px;
 
   &__block {
     position: relative;
     display: block;
-    border-radius: $border-radius;
-    z-index: 0;
-    width: $block-width;
-    max-width: 100%;
-  }
-
-  &__border {
-    @mixin borderDecorSettings($top, $bottom) {
-      content: '';
-      position: absolute;
-      top: $top;
-      bottom: $bottom;
-      left: 0;
-      right: 0;
-      height: $border-width;
-
-      background: url('@/assets/images/svg/title-decor.svg') no-repeat center
-        center;
-      background-size: contain;
-    }
-
-    @include decorParentPosition();
-
-    border-radius: $border-radius;
-    background: $border-gradient;
-    background-size: 50% 50%;
-    background-repeat: no-repeat;
-    z-index: -1;
-    padding: 10px;
-    outline: 3px solid $outline-color;
-
-    &::before {
-      @include borderDecorSettings(0, 'auto');
-    }
-
-    &::after {
-      @include borderDecorSettings('auto', 0);
-
-      transform: rotate(180deg);
-    }
-  }
-
-  &__screws {
-    @mixin screwSettings($left, $right) {
-      content: '';
-      position: absolute;
-      left: $left;
-      right: $right;
-      top: 50%;
-      width: 33px;
-      height: 41px;
-      z-index: -2;
-    }
-
-    @include decorParentPosition();
-
-    &::before {
-      @include screwSettings(0, 'auto');
-
-      transform: translate(calc(-100%), -50%) rotate(180deg);
-      background: url('@/assets/images/svg/title-decor--bolt.svg') no-repeat
-        center center;
-      background-size: contain;
-    }
-
-    &::after {
-      @include screwSettings('auto', 0);
-
-      transform: translate(calc(100%), -50%);
-      background: url('@/assets/images/svg/title-decor--bolt.svg') no-repeat
-        center center;
-      background-size: contain;
-    }
   }
 
   &__content {
-    border-radius: calc($border-radius - 6px);
-    border: 1px solid $primary-color;
-    background-color: $bg-color;
-    text-align: center;
     color: $text-color;
-    padding: 12px;
 
     & > * {
-      font-size: 24px;
+      font-size: 28px;
       font-weight: 700;
+      text-transform: uppercase;
       letter-spacing: 1px;
+      text-shadow: $main-text-shadow;
       margin: 0;
       padding: 0;
     }

diff --git a/packages/client/src/components/ui/PageTitle/PageTitle.tsx b/packages/client/src/components/ui/PageTitle/PageTitle.tsx
@@ -22,9 +22,6 @@ export const PageTitle = (props: PageTitlePropsType) => {
   return (
     <div className={`page-title ${className}`}>
       <div className="page-title__block">
-        <div className="page-title__border"></div>
-        <div className="page-title__screws"></div>
-
         <div className="page-title__content">
           <DynamicTagElement tagName={tagName}>{text}</DynamicTagElement>
         </div>

diff --git a/packages/client/src/layouts/PublicLayout/PublicLayout.tsx b/packages/client/src/layouts/PublicLayout/PublicLayout.tsx
@@ -6,9 +6,9 @@ export default function PublicLayout() {
   return (
     <div className="public-layout">
       <Header className="public-layout__header"></Header>
-      <div className="public-layout__body">
+      <main className="public-layout__body">
         <Outlet />
-      </div>
+      </main>
     </div>
   )
 }
diff --git a/packages/client/src/pages/Main/Main.tsx b/packages/client/src/pages/Main/Main.tsx
@@ -1,6 +1,6 @@
 import './Main.scss'
 import { useEffect, useState } from 'react'
-import { PageTitle } from '@/components/ui/PageTitle/PageTitle'
+import { CustomPageTitle } from '@/components/ui/CustomPageTitle/CustomPageTitle'
 import { Button } from '@/components/ui/Button/Button'
 import { EnemyTank } from './components/EnemyTanks/EnemyTank'
 
@@ -18,7 +18,7 @@ export const Main = () => {
 
       <div className="container">
         <div className="promo-page__content">
-          <PageTitle
+          <CustomPageTitle
             className="promo-page__title"
             tagName="h1"
             text="Вернись на поле битвы!"