yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { ClockIcon } from "@heroicons/react/24/outline";
2import type { CollectActionType } from "@hey/types/hey";
3import dayjs from "dayjs";
4import { motion } from "motion/react";
5import ToggleWithHelper from "@/components/Shared/ToggleWithHelper";
6import { RangeSlider } from "@/components/Shared/UI";
7import { useCollectActionStore } from "@/store/non-persisted/post/useCollectActionStore";
8import { EXPANSION_EASE } from "@/variants";
9
10interface TimeLimitConfigProps {
11 setCollectType: (data: CollectActionType) => void;
12}
13
14const TimeLimitConfig = ({ setCollectType }: TimeLimitConfigProps) => {
15 const { collectAction } = useCollectActionStore((state) => state);
16
17 return (
18 <div className="mt-5">
19 <ToggleWithHelper
20 description="Limit collecting to specific period of time"
21 heading="Time limit"
22 icon={<ClockIcon className="size-5" />}
23 on={Boolean(collectAction.endsAt)}
24 setOn={() =>
25 setCollectType({
26 endsAt: collectAction.endsAt
27 ? null
28 : dayjs().add(1, "day").toISOString()
29 })
30 }
31 />
32 {collectAction.endsAt ? (
33 <motion.div
34 animate="visible"
35 className="mt-4 ml-8 space-y-2 text-sm"
36 initial="hidden"
37 transition={{ duration: 0.2, ease: EXPANSION_EASE }}
38 variants={{
39 hidden: { height: 0, opacity: 0, y: -20 },
40 visible: { height: "auto", opacity: 1, y: 0 }
41 }}
42 >
43 <div>
44 Number of days -{" "}
45 <b>
46 {dayjs(collectAction.endsAt).format("MMM D, YYYY - h:mm:ss A")}
47 </b>
48 </div>
49 <RangeSlider
50 defaultValue={[dayjs(collectAction.endsAt).diff(dayjs(), "day")]}
51 displayValue={dayjs(collectAction.endsAt)
52 .diff(dayjs(), "day")
53 .toString()}
54 max={100}
55 min={1}
56 onValueChange={(value) =>
57 setCollectType({
58 endsAt: dayjs().add(Number(value[0]), "day").toISOString()
59 })
60 }
61 showValueInThumb
62 />
63 </motion.div>
64 ) : null}
65 </div>
66 );
67};
68
69export default TimeLimitConfig;