Habits

date-nav.jsx 35 lines

import React from "react";
import { Button, Input } from "../../shared/ui.jsx";
export function DateNav({ date, setDate, today }) {
  return (
    <div className="ui-actions date-nav">
      <Button
        aria-label="Previous day"
        onClick={() => setDate(previous(date, -1))}
      >
        ←
      </Button>
      <Input
        aria-label="Browse date"
        type="date"
        value={date}
        onChange={(e) => e.target.value && setDate(e.target.value)}
      />
      <Button
        aria-label="Next day"
        disabled={date >= today}
        onClick={() => setDate(previous(date, 1))}
      >
        →
      </Button>
      <Button variant="ghost" onClick={() => setDate(today)}>
        Today
      </Button>
    </div>
  );
}
function previous(date, n) {
  const d = new Date(date + "T12:00:00Z");
  d.setUTCDate(d.getUTCDate() + n);
  return d.toISOString().slice(0, 10);
}