52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import React, { Dispatch, SetStateAction } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { useLocation } from 'react-router-dom';
|
|
|
|
import { IFilterQuery, ILoadingState } from '../types';
|
|
import './main.css';
|
|
import Logotype from '../Logotype';
|
|
import { genName } from './utils';
|
|
import {
|
|
headerTransition,
|
|
headerVariants,
|
|
loadingLogoTransition
|
|
} from './animations';
|
|
|
|
type props = {
|
|
query: IFilterQuery;
|
|
loading: ILoadingState;
|
|
setSearchQuery: Dispatch<SetStateAction<IFilterQuery>>;
|
|
};
|
|
|
|
const Header: React.FC<props> = ({ query, loading, setSearchQuery }) => {
|
|
/*
|
|
* Hooks definitions
|
|
*/
|
|
const { pathname } = useLocation();
|
|
|
|
return (
|
|
<motion.header
|
|
id="name"
|
|
variants={headerVariants}
|
|
transition={headerTransition}
|
|
animate={loading.fetching ? 'expanded' : 'collapsed'}
|
|
initial="expanded"
|
|
>
|
|
<h1>{genName(query, pathname, loading.error)}</h1>
|
|
{loading.fetching ? (
|
|
<motion.div
|
|
id="loadingLogo"
|
|
animate={{ rotate: 360 }}
|
|
transition={loadingLogoTransition}
|
|
>
|
|
<Logotype setSearchQuery={setSearchQuery} />
|
|
</motion.div>
|
|
) : (
|
|
''
|
|
)}
|
|
</motion.header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|