forked from dubinc/dub
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
improved Accordion UI, added UTM builder
- Loading branch information
1 parent
45e0f67
commit 0bda075
Showing
15 changed files
with
395 additions
and
84 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
47 changes: 47 additions & 0 deletions
47
components/app/modals/add-edit-link-modal/expiration-section.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { Dispatch, SetStateAction } from "react"; | ||
| import { motion } from "framer-motion"; | ||
| import { X } from "@/components/shared/icons"; | ||
| import { LinkProps } from "@/lib/types"; | ||
| import { getDateTimeLocal } from "@/lib/utils"; | ||
| import { AnimationSettings } from "./advanced-settings"; | ||
|
|
||
| export default function ExpireSection({ | ||
| data, | ||
| setData, | ||
| }: { | ||
| data: LinkProps; | ||
| setData: Dispatch<SetStateAction<LinkProps>>; | ||
| }) { | ||
| const { expiresAt } = data; | ||
| return ( | ||
| <motion.div key="expire" {...AnimationSettings}> | ||
| <div> | ||
| <label htmlFor="expiresAt" className="block my-2 text-sm text-gray-500"> | ||
| Automatically expires your link at a given date and time. Your link | ||
| will be disabled but the data will still be kept. | ||
| </label> | ||
| <div className="flex space-x-2 mb-3"> | ||
| <input | ||
| type="datetime-local" | ||
| id="expiresAt" | ||
| name="expiresAt" | ||
| min={getDateTimeLocal()} | ||
| value={expiresAt ? getDateTimeLocal(expiresAt) : ""} | ||
| step="60" // need to add step to prevent weird date bug (https://stackoverflow.com/q/19284193/10639526) | ||
| onChange={(e) => { | ||
| setData({ ...data, expiresAt: new Date(e.target.value) }); | ||
| }} | ||
| className="flex space-x-2 justify-center items-center rounded-md shadow-sm border border-gray-300 text-gray-500 hover:border-gray-800 px-3 py-2 w-full focus:outline-none sm:text-sm transition-all" | ||
| /> | ||
| <button | ||
| onClick={() => setData({ ...data, expiresAt: null })} | ||
| type="button" | ||
| className="group rounded-md border w-10 h-10 flex justify-center items-center text-gray-500 hover:text-gray-800 hover:border-gray-800 focus:outline-none transition-all" | ||
| > | ||
| <X className="text-gray-400 w-4 h-4 group-hover:text-black transition-all" /> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </motion.div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
components/app/modals/add-edit-link-modal/password-section.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { Dispatch, SetStateAction } from "react"; | ||
| import { motion } from "framer-motion"; | ||
| import { LinkProps } from "@/lib/types"; | ||
| import { AnimationSettings } from "./advanced-settings"; | ||
|
|
||
| export default function PasswordSection({ | ||
| data, | ||
| setData, | ||
| }: { | ||
| data: LinkProps; | ||
| setData: Dispatch<SetStateAction<LinkProps>>; | ||
| }) { | ||
| const { password } = data; | ||
| return ( | ||
| <motion.div key="password" {...AnimationSettings}> | ||
| <label htmlFor="password" className="block my-2 text-sm text-gray-500"> | ||
| Protect your links with a password. Users will need to enter the | ||
| password to access the link. | ||
| </label> | ||
| <div className="flex rounded-md shadow-sm mb-3"> | ||
| <input | ||
| name="password" | ||
| id="password" | ||
| type="password" | ||
| className="border-gray-300 text-gray-900 placeholder-gray-300 focus:border-gray-500 focus:ring-gray-500 block w-full rounded-md focus:outline-none sm:text-sm" | ||
| value={password} | ||
| onChange={(e) => { | ||
| setData({ ...data, password: e.target.value }); | ||
| }} | ||
| aria-invalid="true" | ||
| /> | ||
| </div> | ||
| </motion.div> | ||
| ); | ||
| } |
Oops, something went wrong.