katamaz/dx4
0
0
Fork 0
Code Issues Actions Projects Activity

bug fixes

Browse Source
This commit is contained in:
unknown
2025-11-29 20:53:09 +03:00
parent 641a12bb0f
commit 61674fbc6f
6 changed files with 272 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trash/trash-components.jsx
+60 -58
View File
@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import React, { useEffect, useState } from "react";
import { BiCheck, BiLeftArrowAlt, BiRightArrowAlt, BiX } from "react-icons/bi";
import { formatDate, getDateTags } from "./dengi.js";
import { AnimatePresence, motion } from "motion/react";
import { AnimatePresence, motion, LayoutGroup } from "motion/react";
export function Switch({
checked,
@@ -105,69 +105,71 @@ function DatePickerButton({ next = false, date, setDate }) {
);
}
export function DatePicker(props) {
export const DatePicker = React.memo((props) => {
const dateTag = getDateTags(props.date);
return (
<div className="flex items-center justify-between px-2 py-1 w-full bg-grain border-zinc-800/40 border rounded-2xl">
<DatePickerButton date={props.date} setDate={props.setDate} />
<AnimatePresence mode="popLayout">
<motion.span
key={formatDate(props.date)}
className="cursor-pointer flex items-center gap-1 justify-center w-[80%] text-zinc-300 lg:hover:text-black *:transition-colors transition-colors p-1 rounded-3xl lg:hover:bg-white px-3 overflow-hidden lg:hover:*:text-black"
variants={{
a: { opacity: 0, filter: "blur(1px)" },
b: { opacity: 1, filter: "blur(0px)" },
}}
initial="a"
animate="b"
exit="a"
onClick={() => {
props.setDate(new Date());
}}
>
<LayoutGroup>
<div className="flex items-center justify-between px-2 py-1 w-full bg-grain border-zinc-800/40 border rounded-2xl relative">
<DatePickerButton date={props.date} setDate={props.setDate} />
<AnimatePresence mode="popLayout">
<motion.span
className={
"block min-w-2 min-h-2 rounded-full mx-1 transition-colors" +
(props.indicator
? " bg-zinc-300 animate-pulse"
: " bg-transparent")
}
layoutId="datepicker_indicator"
layout="position"
/>
<motion.span
layoutId="datepicker_date"
layout="position"
className="font-semibold"
key={formatDate(props.date)}
className="cursor-pointer flex items-center gap-1 justify-center w-[80%] text-zinc-300 lg:hover:text-black *:transition-colors transition-colors p-1 rounded-3xl lg:hover:bg-white px-3 overflow-hidden lg:hover:*:text-black"
variants={{
a: { opacity: 0, filter: "blur(1px)" },
b: { opacity: 1, filter: "blur(0px)" },
}}
initial="a"
animate="b"
exit="a"
onClick={() => {
props.setDate(new Date());
}}
>
{formatDate(props.date)}
<motion.span
className={
"block min-w-2 min-h-2 rounded-full mx-1 transition-colors" +
(props.indicator
? " bg-zinc-300 animate-pulse"
: " bg-transparent")
}
layoutId="datepicker_indicator"
layout="position"
/>
<motion.span
layoutId="datepicker_date"
layout="position"
className="font-semibold"
>
{formatDate(props.date)}
</motion.span>
{dateTag.length > 0 && (
<>
<motion.div
className="flex"
layoutId="datepicker_date_div"
layout="position"
>
<span className="h-[1px] -rotate-50 bg-zinc-800 w-[20px] " />
</motion.div>
<motion.span
initial={{ x: 10, opacity: 0 }}
transition={{ delay: 0.1 }}
animate={{ x: 0, opacity: 1 }}
className="text-zinc-600 italic"
>
{dateTag}
</motion.span>
</>
)}
</motion.span>
{dateTag.length > 0 && (
<>
<motion.div
className="flex"
layoutId="datepicker_date_div"
layout="position"
>
<span className="h-[1px] -rotate-50 bg-zinc-800 w-[20px] " />
</motion.div>
<motion.span
initial={{ x: 10, opacity: 0 }}
transition={{ delay: 0.1 }}
animate={{ x: 0, opacity: 1 }}
className="text-zinc-600 italic"
>
{dateTag}
</motion.span>
</>
)}
</motion.span>
</AnimatePresence>
<DatePickerButton next date={props.date} setDate={props.setDate} />
</div>
</AnimatePresence>
<DatePickerButton next date={props.date} setDate={props.setDate} />
</div>
</LayoutGroup>
);
}
});
export function DengiButton({
onClick,