export default function Page() {
  const [value, setValue] = useState<string>("created");
  return (
    <ToggleButtonGroup value={value} onChange={(value) => setValue(value ?? "created")}>
      <Flex className=" gap-x-4">
        <ToggleButton
          value="updated"
          className={cn(" text-gray-300 data-[state=selected]:text-gray-500")}
        >
          updated
        </ToggleButton>
        <ToggleButton
          value="created"
          className={cn(" text-gray-300 data-[state=selected]:text-gray-500")}
        >
          created
        </ToggleButton>
      </Flex>
    </ToggleButtonGroup>
  );
}