first commit

2026-07-16 20:48:43 -03:00
commit 5696cee264
1111 changed files with 322270 additions and 0 deletions
@@ -0,0 +1,37 @@
+.textTimeLabelContainer {
+    text-align: center;
+    display: inline-block;
+}
+
+.textTimeLabel {
+    color: var(--black);
+    font-size: 16px;
+    font-weight: 700;
+    padding-left: 5px;
+    padding-top: 10px;
+    line-height: 40px;
+    margin-right: 8px;
+    text-align: left;
+}
+
+.textTime {
+    border: solid 1px var(--black);
+    border-radius: 10px;
+    padding: 10px;
+    height: 42px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--black);
+    background: var(--white-dark);
+    background: linear-gradient(180deg, var(--white-dark) 0%, var(--white) 100%);
+    text-align: center;
+    cursor: pointer;
+}
+
+.textTimeWidth80 {
+    width: 80%;
+}
+
+.textTimeWidth100 {
+    width: 100%;
+}
@@ -0,0 +1,89 @@
+"use client";
+import classNames from "classnames";
+import style from "./TextTime.module.css";
+import { useTimePickerStore } from "@store/TimePicker.Store";
+import { useEffect, useState } from "react";
+import dayjs from "dayjs";
+import "dayjs/locale/es";
+
+dayjs.locale("es");
+
+export type TextboxWidth = "80%" | "100%";
+interface TextTimeProps {
+    value?: dayjs.Dayjs;
+    timeFraction?: number;
+    defaultValue?: dayjs.Dayjs;
+    placeholder: string;
+    width?: TextboxWidth;
+    onChange?: (newValue: dayjs.Dayjs) => void;
+}
+
+export default function TextTime(props: TextTimeProps): React.ReactElement {
+    const { width = "80%" } = props;
+    const timePicker = useTimePickerStore();
+    const [timeValue, setTimeValue] = useState<dayjs.Dayjs>(
+        props.value ? props.value : dayjs(new Date())
+    );
+
+    useEffect(() => {
+        if (props.value) {
+            setTimeValue(props.value);
+        }
+    }, [props.value]);
+
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    const getWidth = (base: any) => {
+        if (width === "100%") {
+            return classNames(base, style.textTimeWidth100);
+        } else if (width === "80%") {
+            return classNames(base, style.textTimeWidth80);
+        }
+        return classNames(base, style.textTimeWidth80);
+    };
+
+    const configureTimePicker = () => {
+        if (props.defaultValue) {
+            timePicker.setDefaultValue(props.defaultValue);
+        }
+
+        if (props.timeFraction) {
+            timePicker.setTimeFraction(props.timeFraction);
+        }
+
+        if (props.value) {
+            timePicker.setValue(props.value);
+        }
+    };
+
+    const onClickHandler = () => {
+        configureTimePicker();
+        timePicker.show(onAcceptHandler);
+    };
+
+    const formatValue = () => {
+        return timeValue.format("HH:mm") + " hs.";
+    };
+
+    const onAcceptHandler = (newValue: dayjs.Dayjs) => {
+        setTimeValue(newValue);
+        if (props.onChange) {
+            props.onChange(newValue);
+        }
+        configureTimePicker();
+    };
+
+    return (
+        <>
+            {props.placeholder && (
+                <>
+                    <div className={getWidth(style.textTimeLabelContainer)}>
+                        <div className={getWidth(style.textTimeLabel)}>{props.placeholder}</div>
+                    </div>
+                </>
+            )}
+            <div className={getWidth(style.textTime)} onClick={onClickHandler}>
+                {formatValue()}
+            </div>
+        </>
+    );
+}