Reshaped Calendar

import { Reshaped, useResponsiveClientValue, View } from "reshaped/bundle";
import Calendar from "@/components/ui/reshaped-calendar";

function Component() {
  const monthsToRender = useResponsiveClientValue({
    s: 1,
    l: 2,
  });
  return (
    <View>
      <Calendar
        range
        monthsToRender={monthsToRender}
        defaultMonth={new Date(2023, 0)}
        defaultValue={{
          start: new Date(2023, 0, 10),
          end: new Date(2023, 0, 14),
        }}
      />
    </View>
  );
}

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 640, width: "100%", margin: "0 auto", padding: 24 }}>
        <Component />
      </div>
    </Reshaped>
  );
}