A package for some base ui component ( **not have ui just logic** ).
npm install tailwindui-mzaA package for some base ui component ( not have ui just logic ).
Next component:
1.Grid
2.calender
Install tailwindui-mza with npm
``bash
npm install tailwindui-mza
`
javascript
import { Collapse } from 'tailwindui-mza';function App() {
return;
Any things for show after condition set true.
}
`
CalenderJalali
javascript
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 (
// format use from date-fns-jalali.but you can use any function for show date
{format(activeDate, 'yyyy MMMM d')} // can show year on selectBox or ... by yearList and map on this array
value={yearValue}
onChange={e => {
onChangeYear(+e.target.value);
}}
/>
{monthList.map(month => (
className="w-1/10 bg-yellow-200 p-2 cursor-pointer"
onClick={() => {
onChangeMonth(month);
}}
>
{month}
))}
{dayList.map(day => (
className="w-1/10 bg-yellow-100 p-2 cursor-pointer"
onClick={() => {
onChangeDay(day);
}}
>
{format(day, 'dd')}
))}
For support, email kingman.mza@gmail.com