yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { StarIcon } from "@heroicons/react/24/outline";
2import type { CollectActionType } from "@hey/types/hey";
3import { motion } from "motion/react";
4import ToggleWithHelper from "@/components/Shared/ToggleWithHelper";
5import { Input } from "@/components/Shared/UI";
6import { useCollectActionStore } from "@/store/non-persisted/post/useCollectActionStore";
7import { EXPANSION_EASE } from "@/variants";
8
9interface CollectLimitConfigProps {
10 setCollectType: (data: CollectActionType) => void;
11}
12
13const CollectLimitConfig = ({ setCollectType }: CollectLimitConfigProps) => {
14 const { collectAction } = useCollectActionStore((state) => state);
15
16 return (
17 <div className="mt-5">
18 <ToggleWithHelper
19 description="Make collects limited edition"
20 heading="Exclusive content"
21 icon={<StarIcon className="size-5" />}
22 on={Boolean(collectAction.collectLimit)}
23 setOn={() =>
24 setCollectType({
25 collectLimit: collectAction.collectLimit ? null : 1
26 })
27 }
28 />
29 {collectAction.collectLimit ? (
30 <motion.div
31 animate="visible"
32 className="mt-4 ml-8 text-sm"
33 initial="hidden"
34 transition={{ duration: 0.2, ease: EXPANSION_EASE }}
35 variants={{
36 hidden: { height: 0, opacity: 0, y: -20 },
37 visible: { height: "auto", opacity: 1, y: 0 }
38 }}
39 >
40 <Input
41 label="Collect limit"
42 max="100000"
43 min="1"
44 onChange={(event) => {
45 setCollectType({
46 collectLimit: Number(event.target.value || 1)
47 });
48 }}
49 placeholder="5"
50 type="number"
51 value={collectAction.collectLimit}
52 />
53 </motion.div>
54 ) : null}
55 </div>
56 );
57};
58
59export default CollectLimitConfig;