52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import { HeartOutlined, ScheduleOutlined, SearchOutlined, UserOutlined } from "@ant-design/icons";
|
|
import { Button, Flex } from "antd";
|
|
import { useNavigate } from "react-router";
|
|
import styled from "styled-components";
|
|
import { isRunningStandalone } from "@/utils/front";
|
|
|
|
const StyledContainer = styled.div`
|
|
position: fixed;
|
|
bottom: -1px;
|
|
left: -2px;
|
|
width: calc(100vw + 4px);
|
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
|
|
z-index: 8;
|
|
background: #181818;
|
|
font-size: 16px;
|
|
padding: 8px;
|
|
padding-bottom: ${isRunningStandalone() ? '34px' : ''};
|
|
box-sizing: border-box;
|
|
.ant-btn {
|
|
padding: 24px;
|
|
}
|
|
`;
|
|
|
|
export const AppBar = () => {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<StyledContainer>
|
|
<Flex wrap align="center" justify="space-around">
|
|
<Button
|
|
type="text"
|
|
icon={<ScheduleOutlined size={64} />}
|
|
onClick={() => navigate('/')}
|
|
/>
|
|
<Button
|
|
type="text"
|
|
icon={<HeartOutlined />}
|
|
onClick={() => navigate('/fav-players')}
|
|
/>
|
|
<Button
|
|
type="text"
|
|
icon={<SearchOutlined />}
|
|
onClick={() => navigate('/find')}
|
|
/>
|
|
<Button
|
|
type="text"
|
|
icon={<UserOutlined />}
|
|
onClick={() => navigate('/user-center')}
|
|
/>
|
|
</Flex>
|
|
</StyledContainer>
|
|
);
|
|
} |