feat: Extend Apps page with search and data

packages/web/src/components/SearchInput/index.tsx

@@ -0,0 +1,26 @@
+import SearchIcon from '@mui/icons-material/Search';
+
+import useFormatMessage from 'hooks/useFormatMessage';
+import { Search, SearchIconWrapper, InputBase } from './style';
+
+type SearchInputProps = {
+  onChange?: (event: React.ChangeEvent) => void;
+};
+
+export default function SearchInput({ onChange }: SearchInputProps) {
+  const formatMessage = useFormatMessage();
+
+  return (
+    <Search>
+      <SearchIconWrapper>
+        <SearchIcon />
+      </SearchIconWrapper>
+
+      <InputBase
+        placeholder={formatMessage('searchPlaceholder')}
+        inputProps={{ 'aria-label': 'search' }}
+        onChange={onChange}
+      />
+    </Search>
+  );
+}

packages/web/src/components/SearchInput/style.ts

@@ -0,0 +1,47 @@
+import { styled, alpha } from '@mui/material/styles';
+import MuiInput from '@mui/material/Input';
+
+export const Search = styled('div')(({ theme }) => ({
+  position: 'relative',
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: alpha(theme.palette.common.white, 0.15),
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.common.white, 0.25),
+  },
+  marginLeft: 0,
+  width: '100%',
+  maxWidth: '100%',
+  [theme.breakpoints.up('sm')]: {
+    marginLeft: theme.spacing(1),
+    width: 'auto',
+  },
+}));
+
+export const SearchIconWrapper = styled('div')(({ theme }) => ({
+  padding: theme.spacing(0, 2),
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+export const InputBase = styled(MuiInput)(({ theme }) => ({
+  color: 'inherit',
+  width: '100%',
+  maxWidth: '100%',
+  '& .MuiInput-input': {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create('width'),
+    width: '200',
+    [theme.breakpoints.up('sm')]: {
+      width: '12ch',
+      '&:focus': {
+        width: '20ch',
+      },
+    },
+  },
+}));