Skip to content

Commit

Permalink
Merge pull request #35 from Kanishkrawatt/Options
Browse files Browse the repository at this point in the history 
Added Download And fixed share options
  • Loading branch information
@Kanishkrawatt
Kanishkrawatt authored May 13, 2024
2 parents 69dbe1d + 0c265ec commit 13fac04
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 36 deletions.
49 changes: 24 additions & 25 deletions components/actions/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { options } from '../../utils/constant/index';
import OptionsModal from '../modals/optionsModal';

export type ModalState = Dispatch<SetStateAction<ModalObject>>
export type ActionState = "open" | "delete" | "share";
export type ActionState = "open" | "delete" | "share" | "download";
export type ModalObject = {
status: string;
item: {
Expand All @@ -16,7 +16,8 @@ export type ModalObject = {
export enum Action {
open = "open",
delete = "delete",
share = "share"
share = "share",
download = "download"
}

export const Actions = ({ theme, item, index }: {
Expand All @@ -41,10 +42,27 @@ export const Actions = ({ theme, item, index }: {
case Action.share:
setModal({ status: Action.share, item: item });
break;
case Action.download:
handleDownload(item);
break
default:
break;
}
}
const handleDownload = async (item: datatype) => {
fetch(item.url)
.then((response) => response.blob())
.then((blob) => {
const url = window.URL.createObjectURL(new Blob([blob]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `${item.name}`);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});

}
return (
<React.Fragment>
{index !== -1 && menu === index ? (
Expand Down Expand Up @@ -84,9 +102,9 @@ export const Actions = ({ theme, item, index }: {
)}
{index !== -1 && menu === index && (
<div
className="absolute top-[2.5rem] z-10 right-1 rounded-md w-[6rem] h-[6rem]"
className="absolute top-[3rem] z-10 right-1 rounded-md w-[10rem] h-[auto] p-3"
style={{
backgroundColor: theme.secondary,
backgroundColor: theme.primary,
color: theme.secondaryText,
}}
>
Expand All @@ -95,31 +113,12 @@ export const Actions = ({ theme, item, index }: {
key={key}
className="w-full h-1/3 flex justify-center items-center rounded-md"
>

<div
onClick={() => {
handleAction(Optionitem.name as ActionState, item);
}}
className="w-full h-8 flex cursor-pointer justify-center items-center hover:bg-gray-200 hover:text-gray-700"
style={{
borderTop:
key === options.length - 1
? "1px solid lightgray"
: key === 0
? "none"
: "1px solid lightgray",
borderBottom:
key === 0
? "1px solid lightgray"
: key === options.length - 1
? "none"
: "1px solid lightgray",
borderRadius:
key === 0
? "6px 6px 0 0"
: key === options.length - 1
? "0 0 6px 6px"
: "none",
}}
className="w-full p-2 rounded-md flex cursor-pointer pl-2 items-center hover:bg-gray-200 hover:text-gray-700"
>
{Optionitem.name}
</div>
Expand Down
61 changes: 61 additions & 0 deletions components/modals/optionsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ function OptionsModal({ modal, setModal, itemUrl }: {
return <DeleteItem modal={modal} setModal={setModal} itemUrl={itemUrl} />
case "open":
return <OpenItem modal={modal} setModal={setModal} itemUrl={itemUrl} />
case "share":
return <ShareItem modal={modal} setModal={setModal} itemUrl={itemUrl} />
default:
return <></>
}
Expand Down Expand Up @@ -146,4 +148,63 @@ export const OpenItem = ({ modal, setModal, itemUrl }: {
)
}

export const ShareItem = ({ modal, setModal, itemUrl }: {
modal: { status: string, item: any },
setModal: React.Dispatch<React.SetStateAction<{ status: string, item: any }>>,
itemUrl: string
}) => {
const handleShare = () => {
navigator.clipboard.writeText(itemUrl);
setModal({ status: "closed", item: {} });
};

return (
<div className="h-[100vh] w-[100vw] flex overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center md:inset-0 max-h-full">
<div className="relative p-4 w-full max-w-md max-h-full">
<div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
<button
type="button"
className="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
onClick={() => setModal({ status: "closed", item: {} })}
>
<svg
className="w-3 h-3"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 14"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
/>
</svg>
<span className="sr-only">Close modal</span>
</button>
<div className="p-4 md:p-5 text-center">
<h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
Share this link
</h3>
<div className="flex justify-center items-center">
<input
type="text"
value={itemUrl}
className="w-full p-2 text-center bg-gray-100 dark:bg-gray-800 dark:text-gray-400 rounded-lg"
/>
<button
onClick={handleShare}
className="text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center"
>
Copy
</button>
</div>
</div>
</div>
</div>
</div>
)
}
export default OptionsModal
17 changes: 6 additions & 11 deletions utils/constant/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,15 @@ import { datatype } from "../../components/types"
export const options = [
{
name: "open",
onClick: (item: datatype) => {
window.open(item.url);
},
},
{
name: "delete",
onClick: () => {
alert("Deleting ");
},
name: "share",
},
{
name: "share",
onClick: () => {
alert("sharing ");
},
name: "delete",
},
{
name: "download",
action: "download"
}
];

0 comments on commit 13fac04

Please sign in to comment.