init project

docs/data/joy/getting-started/templates/rental-dashboard/components/OrderSelector.tsx

@@ -0,0 +1,25 @@
+import MenuButton from '@mui/joy/MenuButton';
+import Menu from '@mui/joy/Menu';
+import MenuItem from '@mui/joy/MenuItem';
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
+import Dropdown from '@mui/joy/Dropdown';
+
+export default function OrderSelector() {
+  return (
+    <Dropdown>
+      <MenuButton
+        variant="plain"
+        color="primary"
+        endDecorator={<ArrowDropDown />}
+        sx={{ whiteSpace: 'nowrap' }}
+      >
+        Order by
+      </MenuButton>
+      <Menu sx={{ minWidth: 120 }}>
+        <MenuItem>Price</MenuItem>
+        <MenuItem>Date</MenuItem>
+        <MenuItem>Rating</MenuItem>
+      </Menu>
+    </Dropdown>
+  );
+}