Spaces:
Running
Running
File size: 6,042 Bytes
9cd6ddb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
import { ArrowRightIcon, ArrowLeftIcon } from "@heroicons/react/solid";
import { useContext, useRef } from "react";
import { useResults } from "components/search/hooks/useSearch";
import { ListItem } from "components/editor-icons/comps/list/list-item";
import { IconItem } from "types/editor";
import { Empty } from "components/empty";
import { login, useUser } from "utils/auth";
import { PremiumContext } from "components/premium/premium";
import { Premium } from "@/components/premium";
import classNames from "classnames";
import { toBase64 } from "@/components/upload";
import { FormattedMessage } from "react-intl";
export const ListIcons = ({
onSelect,
onCustomText,
onCustomUpload,
}: {
onSelect: (e: IconItem) => void;
onCustomText: () => void;
onCustomUpload: (s: string) => void;
}) => {
const { user } = useUser();
const { setOpen } = useContext(PremiumContext);
const inputRef = useRef<HTMLInputElement>(null);
const { results, page, maxPage, totalItems, setPage } = useResults();
const handleCustomUpload = (e: any) => {
const file = e.target.files[0];
if (file) {
toBase64(file).then((res: any) => {
onCustomUpload(res);
});
}
};
return (
<div>
<div className="flex flex-col lg:flex-row gap-y-3 lg:gap-y-0 items-start justify-between">
<p className="font-bold tracking-wider text-base text-white">
<FormattedMessage
id="iconsEditor.editor.listIcons.totalIcons"
values={{ total: () => totalItems }}
/>
</p>
<input
ref={inputRef}
type="file"
className="hidden"
onChange={handleCustomUpload}
/>
<div className="flex w-full lg:w-auto items-center justify-end gap-3">
<button
className={classNames(
"w-full lg:w-auto px-3 py-2 hover:bg-opacity-70 text-xs font-semibold text-white rounded-md flex items-center justify-center lg:justify-start gap-2",
{
"bg-dark-300": !user?.id,
"bg-darkGreen": user?.id,
}
)}
onClick={() => inputRef.current?.click()}
>
{!user && <Premium size="16" tooltip={true} />}
<FormattedMessage id="iconsEditor.editor.listIcons.uploadCustomIcon" />
</button>
<button
className={classNames(
"w-full lg:w-auto px-3 py-2 hover:bg-opacity-70 text-xs font-semibold text-white rounded-md flex items-center justify-center lg:justify-start gap-2",
{
"bg-dark-300": !user?.id,
"bg-yellow": user?.id,
}
)}
onClick={onCustomText}
>
{!user && <Premium size="16" tooltip={true} />}
<FormattedMessage id="iconsEditor.editor.listIcons.useCustomText" />
</button>
</div>
</div>
<div className="flex jlg:items-start flex-wrap justify-start mt-3 gap-2 lg:gap-3">
{results?.map((result: any, key: number) => (
<ListItem
key={key}
icon={result}
fill={result?.defaultColor}
onSelect={(icon) => {
// if (icon?.isPremium && !user?.id) return setOpen(true);
onSelect(icon);
}}
/>
))}
{results?.length === 0 && (
<Empty
title="Clyde is disappointed..."
description="...there is no icon that matches your search :("
action={() => {
if (!user?.id) return login();
// send to api a request;
console.log("display Modal and call API");
}}
button="Ask for a new Icon"
/>
)}
</div>
{results?.length > 0 && (
<div className="flex items-center justify-between gap-4 mt-10">
<button
disabled={page <= 1}
className="w-full lg:w-auto group border-2 border-darkGreen bg-darkGreen text-white font-medium tracking-wide px-3.5 py-2 text-sm flex items-center justify-center gap-2 rounded-lg hover:bg-opacity-90 hover:border-opacity-0 disabled:bg-dark-100 disabled:bg-opacity-20 disabled:border-dark-100 disabled:border-opacity-0 disabled:text-dark-200 disabled:cursor-not-allowed"
onClick={() => setPage(page - 1)}
>
<ArrowLeftIcon className="w-4 text-white group-disabled:text-dark-200" />
<FormattedMessage
id="iconsEditor.editor.listIcons.pagination.previous"
values={{
span: (t) => <span className="hidden lg:inline">{t}</span>,
}}
/>
</button>
<div className="hidden items-center justify-center gap-2 lg:flex">
<p className="text-dark-100 font-medium text-sm">
<FormattedMessage
id="iconsEditor.editor.listIcons.pagination.total"
values={{
page: () => page,
maxPage: () => maxPage,
}}
/>
</p>
</div>
<button
disabled={page === maxPage}
className="w-full lg:w-auto group border-2 border-darkGreen bg-darkGreen text-white font-medium tracking-wide px-3.5 py-2 text-sm flex items-center justify-center gap-2 rounded-lg hover:bg-opacity-90 hover:border-opacity-0 disabled:bg-dark-100 disabled:bg-opacity-20 disabled:border-dark-100 disabled:border-opacity-0 disabled:text-dark-200 disabled:cursor-not-allowed"
onClick={page >= maxPage ? () => {} : () => setPage(page + 1)}
>
<FormattedMessage
id="iconsEditor.editor.listIcons.pagination.next"
values={{
span: (t) => <span className="hidden lg:inline">{t}</span>,
}}
/>
<ArrowRightIcon className="w-4 text-white group-disabled:text-dark-200" />
</button>
</div>
)}
</div>
);
};
|