tailwindui-mza v0.2.0

tailwindui-mza

A package for some base ui component ( not have ui just logic ).

Next component: 1.Grid 2.calender

Installation

Install tailwindui-mza with npm

  npm install tailwindui-mza

Usage/Examples

collapse

import { Collapse } from 'tailwindui-mza';

function App() {
  return;
  <Collapse in={condition} duration={1000}>
    Any things for show after condition set true.
  </Collapse>;
}

CalenderJalali

import { newDate, format } from "date-fns-jalali";
import { ChangeEvent } from "react";
import useCalender from "tailwindui-mza";

const Calender = () => {
  const {
    activeDate,
    onChangeYear,
    onChangeMonth,
    onChangeDay,
    yearValue,
    dayList,
    monthList,
    yearList,
  } = useCalenderJalali({
    defaultDate: newDate(1300, 1, 2),
    yearsOptions: {
      from: 1300,
      to: 1500,
    },
  });
  return (
    <div className="px-10">
      // format use from date-fns-jalali.but you can use any function for show date
      <div> {format(activeDate, 'yyyy MMMM d')}</div>

      // can show year on selectBox or ... by yearList and map on this array
      <input
        type="text"
        value={yearValue}
        onChange={e => {
          onChangeYear(+e.target.value);
        }}
      />
      <div className="box-border bg-gray-200  flex flex-wrap">
        {monthList.map(month => (
          <div
            key={month}
            className="w-1/10 bg-yellow-200 p-2 cursor-pointer"
            onClick={() => {
              onChangeMonth(month);
            }}
          >
            {month}
          </div>
        ))}
      </div>
      <div className=" bg-gray-100 flex flex-wrap">
        {dayList.map(day => (
          <div
            key={day.getTime()}
            className="w-1/10 bg-yellow-100 p-2  cursor-pointer"
            onClick={() => {
              onChangeDay(day);
            }}
          >
            {format(day, 'dd')}
          </div>
        ))}
      </div>
    </div>
  );
};

Support

For support, email kingman.mza@gmail.com