73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
|
import { Box, InputBase, styled } from '@mui/material';
|
||
|
|
import SearchIcon from '@mui/icons-material/Search';
|
||
|
|
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
|
||
|
|
|
||
|
|
const HeaderContainer = styled(Box)(({ theme }) => ({
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
padding: '0 20px',
|
||
|
|
height: '60px',
|
||
|
|
backgroundColor: '#FFFFFF',
|
||
|
|
color: '#333',
|
||
|
|
boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
|
||
|
|
borderBottom: '1px solid #E5E5E5',
|
||
|
|
}));
|
||
|
|
|
||
|
|
const BrandTitle = styled(Box)(({ theme }) => ({
|
||
|
|
fontSize: '1.2rem',
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: '#333',
|
||
|
|
}));
|
||
|
|
|
||
|
|
const SearchBox = styled(Box)(({ theme }) => ({
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
backgroundColor: '#F8F9FA',
|
||
|
|
borderRadius: '6px',
|
||
|
|
padding: '6px 12px',
|
||
|
|
width: '320px',
|
||
|
|
border: '1px solid #E5E5E5',
|
||
|
|
marginLeft: 'auto',
|
||
|
|
marginRight: '20px',
|
||
|
|
'&:focus-within': {
|
||
|
|
borderColor: theme.palette.primary.main,
|
||
|
|
boxShadow: `0 0 0 2px rgba(226,0,116,0.1)`,
|
||
|
|
},
|
||
|
|
'& .MuiInputBase-input': {
|
||
|
|
border: 'none',
|
||
|
|
outline: 'none',
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
fontSize: '14px',
|
||
|
|
color: '#333',
|
||
|
|
'&::placeholder': {
|
||
|
|
color: '#999',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}));
|
||
|
|
|
||
|
|
const SearchInput = styled(InputBase)(({ theme }) => ({
|
||
|
|
marginLeft: '8px',
|
||
|
|
flex: 1,
|
||
|
|
fontSize: '0.875rem',
|
||
|
|
}));
|
||
|
|
|
||
|
|
const UserAvatar = styled(AccountCircleIcon)(({ theme }) => ({
|
||
|
|
color: '#666',
|
||
|
|
cursor: 'pointer',
|
||
|
|
fontSize: '2rem',
|
||
|
|
}));
|
||
|
|
|
||
|
|
const Header = () => {
|
||
|
|
return (
|
||
|
|
<HeaderContainer>
|
||
|
|
<BrandTitle>RAG Dashboard</BrandTitle>
|
||
|
|
<SearchBox>
|
||
|
|
<SearchIcon sx={{ color: '#999', fontSize: '1.2rem' }} />
|
||
|
|
<SearchInput placeholder="Search queries, KB names..." />
|
||
|
|
</SearchBox>
|
||
|
|
<UserAvatar titleAccess="User Profile" />
|
||
|
|
</HeaderContainer>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Header;
|