ar-design
Version:
AR Design is a (react | nextjs) ui library.
27 lines (26 loc) • 1.55 kB
JavaScript
import React from "react";
import Button from "../../form/button";
import { ARIcon } from "../../icons";
import Box from "../grid-system/box/Box";
const Header = ({ states, config }) => {
// methods
const changeWeek = (direction) => {
states.currentDate.set((prev) => {
if (direction === "today")
return new Date();
const newDate = new Date(prev);
newDate.setDate(prev.getDate() + (direction === "next" ? 7 : -7));
return newDate;
});
};
return (React.createElement("div", { className: "header" },
React.createElement(Box, null,
React.createElement(Button, { variant: "outlined", color: "green", border: { radius: "xxl" }, onClick: () => changeWeek("today") }, "Bug\u00FCn"),
React.createElement(Button, { variant: "borderless", color: "light", border: { radius: "pill" }, icon: { element: React.createElement(ARIcon, { icon: "ArrowLeft", stroke: "currentColor" }) }, onClick: () => changeWeek("prev") }),
React.createElement(Button, { variant: "borderless", color: "light", border: { radius: "pill" }, icon: { element: React.createElement(ARIcon, { icon: "ArrowRight", stroke: "currentColor" }) }, onClick: () => changeWeek("next") }),
React.createElement("span", { className: "week-time" },
states.currentDate.get.toLocaleString(config?.locale ?? "tr-TR", { month: "long" }),
" ",
states.currentDate.get.getFullYear()))));
};
export default Header;