{"size": 919, "ext": "js", "max_stars_repo_path": "component/DateSelectionDateCard.js", "max_stars_repo_name": "clearvis-io/clearvisio-appointment-booker", "max_stars_repo_stars_event_min_datetime": "2021-10-21T16:55:42.000Z", "max_stars_repo_stars_event_max_datetime": "2021-10-21T16:55:42.000Z", "max_issues_repo_path": "component/DateSelectionDateCard.js", "max_issues_repo_name": "hendricha/clearvisio-appointment-booker", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "component/DateSelectionDateCard.js", "max_forks_repo_name": "hendricha/clearvisio-appointment-booker", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.71875, "max_line_length": 110, "alphanum_fraction": 0.6082698585}
import {useStoreon} from 'storeon/preact'
import {html, datesMatch, translator as __} from '../helper/index.js'

const abbrivedDayOfTheWeek = [
  '@abbrSunday',
  '@abbrMonday',
  '@abbrTuesday',
  '@abbrWednesday',
  '@abbrThursday',
  '@abbrFriday',
  '@abbrSaturday'
];

export default ({date}) => {
  const { selectedDate, dispatch } = useStoreon('selectedDate')

  const onClick = () => dispatch('selectedDate/set', date);

  return html`
    <div class="col">
      <div class="card ${datesMatch(date, selectedDate) ? 'bg-primary text-light' : ''}" onClick="${onClick}">
        <div class="card-body user-select-none p-1">
          <h6 class="card-subtitle text-center ${!datesMatch(date, selectedDate) ? 'text-muted' : ''}">
            ${__(abbrivedDayOfTheWeek[date.getDay()])}
          </h6>
          <h5 class="card-title text-center">${date.getDate()}</h5>
        </div>
      </div>
    </div>
  `;
}
