<.date_picker
  id="date-picker-single-default"
  open
  presets={[%{id: "1h", label: "Last 1 hour", period: {1, :hour}}, %{id: "24h", label: "Last 24 hours", period: {24, :hour}}, %{id: "7d", label: "Last 7 days", period: {7, :day}}, %{id: "30d", label: "Last 30 days", period: {30, :day}}, %{id: "custom", label: "Custom"}]}
  selected_preset="7d"
>
  <:actions>
    <button
      type="button"
      class="noora-button"
      data-variant="secondary"
      data-size="medium"
      phx-click={JS.dispatch("phx:date-picker-cancel", detail: %{id: "date-picker-default"})}
    >
      Cancel
    </button>
    <button
      type="button"
      class="noora-button"
      data-variant="primary"
      data-size="medium"
      phx-click={JS.dispatch("phx:date-picker-apply", detail: %{id: "date-picker-default"})}
    >
      Apply
    </button>
  </:actions>
</.date_picker>