Feat/add footer and header

.eslintrc.cjs

@@ -33,6 +33,7 @@ module.exports = {
     'react/function-component-definition': 0,
     'no-underscore-dangle': 0,
     'jsx-a11y/no-static-element-interactions': 0,
+    'jsx-a11y/control-has-associated-label': 0,
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     'sort-imports': ['error', {ignoreCase: true, ignoreDeclarationSort: true}],
     'import/order': [

src/components/Footer/Footer.tsx

@@ -1,5 +1,31 @@
+import ghIcon from '@assets/Github.svg';
+import rsLogo from '@assets/rs_school_js.svg';
+
 const Footer = () => {
-  return <footer>Here will be footer</footer>;
+  return (
+    <footer className="flex h-fit flex-col items-center justify-center">
+      <div className="flex gap-3">
+        <a href="https://github.com/Quiddlee" className="flex gap-[7px]">
+          <img src={ghIcon} alt="" />
+          <span>Quiddle</span>
+        </a>
+        <a href="https://github.com/Tedzury" className="flex gap-[7px]">
+          <img src={ghIcon} alt="" />
+          <span>Tedzury</span>
+        </a>
+        <a href="https://github.com/barrydilan" className="flex gap-[7px]">
+          <img src={ghIcon} alt="" />
+          <span>Barrydilan</span>
+        </a>
+      </div>
+      <div className="mt-[6px] flex items-center gap-3">
+        <span>2023</span>
+        <a href="https://rs.school/react/">
+          <img src={rsLogo} alt="" className="block w-[50px]" />
+        </a>
+      </div>
+    </footer>
+  );
 };
 
 export default Footer;

src/components/Header/Header.tsx

@@ -11,24 +11,30 @@ import ROUTES from '@shared/constants/routes';
 import viewTransition from '@shared/lib/helpers/viewTransition';
 import useScreen from '@shared/lib/hooks/useScreen';
 
+import LangSwitcher from './ui/LangSwitcher';
+
 const Header = () => {
   const [isDocsShown, setIsDocsShown] = useState(false);
-  const { translation } = useLanguage();
+  const { translation, language, changeLanguage } = useLanguage();
   const { pathname } = useLocation();
   const isSettings = pathname.slice(1) === ROUTES.SETTINGS;
   const navigate = useNavigate();
   const isMobile = useScreen() === 'mobile';
-  const { logOut } = useAuth();
+  const { logOut, isAuth } = useAuth();
 
-  const docsTooltip = translation.mainLayout.header.tooltips.docs;
+  const { docsTip, logOutTip, langTip, homeTip } = translation.mainLayout.header.tooltips;
 
   function handleClick() {
     viewTransition(() => navigate(-1));
   }
 
+  const isDocsToShow = isAuth;
+  const isLogOutToShow = isAuth;
+  const isHomeToShow = pathname !== '/';
+
   return (
     <>
-      <header className="col-start-1 col-end-2 flex w-full items-center justify-end py-2 pr-2 sm:col-end-3">
+      <header className="col-start-1 col-end-2 flex w-full items-center justify-end gap-3 py-2 pr-2 sm:col-end-3 sm:gap-8">
         {isSettings && !isMobile ? (
           <h1 style={{ viewTransitionName: 'title' }} className="mr-auto flex items-center pl-4 font-readex_pro">
             <button type="button" onClick={handleClick} className="flex h-12 w-12 items-center justify-center">
@@ -48,17 +54,27 @@ const Header = () => {
             <Link to={ROUTES.WELCOME_PAGE}>GraphiQL</Link>
           </h1>
         )}
-        <button type="button" onClick={() => logOut()}>
-          Log out
-        </button>
-        <IconButton
-          onClick={() => setIsDocsShown((prev) => !prev)}
-          data-tooltip={docsTooltip}
-          data-testid="show_docs"
-          className="tooltipElem"
-        >
-          <Icon>article</Icon>
-        </IconButton>
+        <LangSwitcher language={language} changeLanguage={changeLanguage} tip={langTip} />
+        {isHomeToShow && (
+          <IconButton data-tooltip={homeTip} className="tooltipElem" onClick={() => navigate(ROUTES.WELCOME_PAGE)}>
+            <Icon>home</Icon>
+          </IconButton>
+        )}
+        {isDocsToShow && (
+          <IconButton
+            onClick={() => setIsDocsShown((prev) => !prev)}
+            data-tooltip={docsTip}
+            data-testid="show_docs"
+            className="tooltipElem"
+          >
+            <Icon>article</Icon>
+          </IconButton>
+        )}
+        {isLogOutToShow && (
+          <IconButton onClick={() => logOut()} className="tooltipElem" data-tooltip={logOutTip}>
+            <Icon>door_open</Icon>
+          </IconButton>
+        )}
       </header>
       <DocsComp isShown={isDocsShown} setIsDocsShown={setIsDocsShown} />
     </>

src/components/Header/ui/LangSwitcher.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+
+type PropsType = {
+  language: string;
+  changeLanguage: (lang: 'en' | 'ru') => void;
+  tip: string;
+};
+
+const LangSwitcher: FC<PropsType> = ({ language, changeLanguage, tip }) => {
+  const text = language === 'en' ? 'Eng' : 'Ru';
+  const switchLang = language === 'en' ? 'ru' : 'en';
+  return (
+    <button onClick={() => changeLanguage(switchLang)} type="button" data-tooltip={tip} className="tooltipElem">
+      {text}
+    </button>
+  );
+};
+
+export default LangSwitcher;

src/components/ResponseViewer/ResponseViewer.tsx

@@ -43,17 +43,17 @@ const ResponseViewer: FC<ResponseViewerProps> = ({ onResponseClose, isHidden })
       >
         <Icon>close</Icon>
       </IconButton>
-      <div className="grid h-full w-full overflow-hidden rounded-4xl bg-surface-container lg:max-h-none">
+      <div className="flex h-full w-full flex-col overflow-hidden rounded-4xl bg-surface-container lg:max-h-none">
         <div
           data-testid="response-viewer"
           ref={rootRef}
-          className="h-full w-full justify-between overflow-hidden overflow-y-scroll py-7 pl-4 pr-4 sm:pl-7"
+          className="h-full w-full grow justify-between overflow-hidden overflow-y-scroll py-7 pl-4 pr-4 sm:pl-7"
         >
           <article className="h-fit w-fit pr-10">
             <EditorField key={currentResponse} value={currentResponse} onChange={() => {}} isJson isReadOnly />
           </article>
         </div>
-        <div className="mb-7 mt-4 flex w-full justify-center lg:hidden">
+        <div className="mb-4 mt-6 flex h-fit w-full justify-center lg:hidden">
           <Footer />
         </div>
       </div>

src/locales/en.ts

@@ -95,7 +95,10 @@ const en = {
 	mainLayout: {
 		header: {
 			tooltips: {
-				docs: 'Show docs',
+				docsTip: 'Show docs',
+				logOutTip: 'Log out',
+				langTip: 'Change lang',
+				homeTip: 'Home',
 			},
 		},
 	},

src/locales/ru.ts

@@ -96,7 +96,10 @@ const ru = {
 	mainLayout: {
 		header: {
 			tooltips: {
-				docs: 'Документация',
+				docsTip: 'Документация',
+				logOutTip: 'Выйти',
+				langTip: 'Сменить язык',
+				homeTip: 'Домой',
 			},
 		},
 	},

src/pages/LoginPage.tsx

@@ -54,7 +54,7 @@ export default function LoginPage() {
 
   return (
     <section className="mx-5 flex items-center justify-center">
-      <article className="w-[560px] rounded-[30px] bg-surface-container px-7 py-[60px] sm:px-20">
+      <article className="w-full max-w-[560px] rounded-[30px] bg-surface-container px-7 py-[60px] sm:px-20">
         <h1 className="text-center text-2xl font-[400] text-on-surface">{title}</h1>
         <h2 className="mt-3 text-center text-base font-[400] text-on-surface-variant">{subtitle}</h2>
         <form noValidate className="mt-8" onSubmit={handleSubmit(onSubmit)}>