-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #81 from HunnySajid/feat/create-aid
Feat/create aid
- Loading branch information
Showing
8 changed files
with
288 additions
and
34 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
import { isValidElement, useState, useEffect } from "react"; | ||
import { hasWhiteSpace, removeWhiteSpace } from "@pages/background/utils"; | ||
import { Loader } from "@components/loader"; | ||
|
||
export function CreateIdentifierCard(props): JSX.Element { | ||
const [name, setName] = useState(""); | ||
const [nameError, setNameError] = useState(""); | ||
|
||
useEffect(() => { | ||
setNameError(props.error); | ||
}, [props.error]); | ||
const onBlurName = () => { | ||
if (!name) { | ||
setNameError("Name can not be empty"); | ||
} else { | ||
setNameError(""); | ||
} | ||
}; | ||
|
||
const handleRemoveWhiteSpace = () => { | ||
setName(removeWhiteSpace(name)); | ||
setNameError(""); | ||
}; | ||
const onCreateIdentifier = async () => { | ||
let hasError = false; | ||
if (!name) { | ||
setNameError("Name can not be empty"); | ||
hasError = true; | ||
} else if (hasWhiteSpace(name)) { | ||
setNameError( | ||
<div className="text-red mt-1"> | ||
No white spaces allowed.{" "} | ||
<button | ||
className=" underline cursor-pointer" | ||
onClick={handleRemoveWhiteSpace} | ||
> | ||
click to remove | ||
</button> | ||
</div> | ||
); | ||
hasError = true; | ||
} | ||
|
||
if (!hasError) props.handleCreateIdentifier(name); | ||
}; | ||
|
||
return ( | ||
<> | ||
<div className=" max-w-xs m-4 flex flex-col gap-y-4"> | ||
<div> | ||
<input | ||
type="text" | ||
id="vendor_url" | ||
className={`bg-gray-50 border text-black border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 ${ | ||
nameError ? " text-red border-red" : "" | ||
} `} | ||
placeholder="Enter unique name for identifier" | ||
required | ||
value={name} | ||
onChange={(e) => setName(e.target.value)} | ||
onBlur={onBlurName} | ||
/> | ||
{nameError ? ( | ||
isValidElement(nameError) ? ( | ||
nameError | ||
) : ( | ||
<p className="text-red mt-1">{nameError}</p> | ||
) | ||
) : null} | ||
</div> | ||
<div className=" flex flex-row justify-center mt-2"> | ||
<button | ||
type="button" | ||
onClick={onCreateIdentifier} | ||
className="text-white bg-green flex flex-row gap-x-1 font-medium rounded-full text-sm px-5 py-2 text-center" | ||
> | ||
{props.isLoading ? <Loader size={4} /> : null} | ||
<p className="font-medium text-md">Create</p> | ||
</button> | ||
</div> | ||
</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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import React from "react"; | ||
|
||
export const Drawer = ({ children, isOpen, handleClose, header }) => { | ||
return ( | ||
<div | ||
className={ | ||
" fixed overflow-hidden z-50 bg-gray-dark bg-opacity-25 inset-0 transform ease-in-out " + | ||
(isOpen | ||
? " transition-opacity opacity-100 duration-500 translate-x-0 " | ||
: " transition-all delay-500 opacity-0 translate-x-full ") | ||
} | ||
> | ||
<section | ||
className={ | ||
"rounded-bl-2xl rounded-tl-2xl border-t border-l border-b border-t-white border-b-white border-l-white w-screen max-w-xs right-0 absolute bg-gray-dark h-full shadow-xl delay-400 duration-500 ease-in-out transition-all transform " + | ||
(isOpen ? " translate-x-0 " : " translate-x-full ") | ||
} | ||
> | ||
<article className="relative w-screen max-w-xs pb-10 flex flex-col space-y-6 overflow-y-scroll h-full"> | ||
<header className="p-4 font-bold text-lg ">{header}</header> | ||
{children} | ||
</article> | ||
</section> | ||
<section | ||
className=" w-screen h-full cursor-pointer " | ||
onClick={handleClose} | ||
></section> | ||
</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
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
Oops, something went wrong.