admin/BlockchainUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Removing redundant components

Browse Source
This commit is contained in:
DwCay
2022-05-30 16:23:36 +03:00
parent b98c4db02d
commit 3cd337d589
145 changed files with 10 additions and 23605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/Banner.jsx
View File

@@ -1,79 +0,0 @@
import React from 'react';
function Banner({
children,
className,
type,
open,
setOpen
}) {
const typeIcon = (type) => {
switch (type) {
case 'warning':
return (
<svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
</svg>
);
case 'error':
return (
<svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
</svg>
);
case 'success':
return (
<svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
</svg>
);
default:
return (
<svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
</svg>
);
}
};
const typeColor = (type) => {
switch (type) {
case 'warning':
return 'bg-amber-500';
case 'error':
return 'bg-rose-500';
case 'success':
return 'bg-emerald-500';
default:
return 'bg-indigo-500';
}
};
return (
<>
{open &&
<div className={className}>
<div className={`px-4 py-2 rounded-sm text-sm text-white ${typeColor(type)}`}>
<div className="flex w-full justify-between items-start">
<div className="flex">
{typeIcon(type)}
<div className="font-medium">
{children}
</div>
</div>
<button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
<div className="sr-only">Close</div>
<svg className="w-4 h-4 fill-current">
<path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
</svg>
</button>
</div>
</div>
</div>
}
</>
);
}
export default Banner;

79
src/components/Banner2.jsx
View File

@@ -1,79 +0,0 @@
import React from 'react';
function Banner2({
children,
className,
type,
open,
setOpen
}) {
const typeIcon = (type) => {
switch (type) {
case 'warning':
return (
<svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
</svg>
);
case 'error':
return (
<svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
</svg>
);
case 'success':
return (
<svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
</svg>
);
default:
return (
<svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
</svg>
);
}
};
const typeColor = (type) => {
switch (type) {
case 'warning':
return 'bg-amber-100 border-amber-200 text-amber-600';
case 'error':
return 'bg-rose-100 border-rose-200 text-rose-600';
case 'success':
return 'bg-emerald-100 border-emerald-200 text-emerald-600';
default:
return 'bg-indigo-100 border-indigo-200 text-indigo-500';
}
};
return (
<>
{open &&
<div className={className}>
<div className={`px-4 py-2 rounded-sm text-sm border ${typeColor(type)}`}>
<div className="flex w-full justify-between items-start">
<div className="flex">
{typeIcon(type)}
<div>
{children}
</div>
</div>
<button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
<div className="sr-only">Close</div>
<svg className="w-4 h-4 fill-current">
<path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
</svg>
</button>
</div>
</div>
</div>
}
</>
);
}
export default Banner2;

116
src/components/DateSelect.jsx
View File

@@ -1,116 +0,0 @@
import React, { useState, useRef, useEffect } from 'react';
import Transition from '../utils/Transition';
function DateSelect() {
const options = [
{
id: 0,
period: 'Today'
},
{
id: 1,
period: 'Last 7 Days'
},
{
id: 2,
period: 'Last Month'
},
{
id: 3,
period: 'Last 12 Months'
},
{
id: 4,
period: 'All Time'
}
];
const [dropdownOpen, setDropdownOpen] = useState(false);
const [selected, setSelected] = useState(2);
const trigger = useRef(null);
const dropdown = useRef(null);
// close on click outside
useEffect(() => {
const clickHandler = ({ target }) => {
if (!dropdown.current) return;
if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
setDropdownOpen(false);
};
document.addEventListener('click', clickHandler);
return () => document.removeEventListener('click', clickHandler);
});
// close if the esc key is pressed
useEffect(() => {
const keyHandler = ({ keyCode }) => {
if (!dropdownOpen || keyCode !== 27) return;
setDropdownOpen(false);
};
document.addEventListener('keydown', keyHandler);
return () => document.removeEventListener('keydown', keyHandler);
});
return (
<div className="relative">
<button
ref={trigger}
className="btn justify-between min-w-44 bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600"
aria-label="Select date range"
aria-haspopup="true"
onClick={() => setDropdownOpen(!dropdownOpen)}
aria-expanded={dropdownOpen}
>
<span className="flex items-center">
<svg className="w-4 h-4 fill-current text-slate-500 shrink-0 mr-2" viewBox="0 0 16 16">
<path d="M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 00-1 1v12a1 1 0 001 1h14a1 1 0 001-1V3a1 1 0 00-1-1zm-1 12H2V6h12v8z" />
</svg>
<span>{options[selected].period}</span>
</span>
<svg className="shrink-0 ml-1 fill-current text-slate-400" width="11" height="7" viewBox="0 0 11 7">
<path d="M5.4 6.8L0 1.4 1.4 0l4 4 4-4 1.4 1.4z" />
</svg>
</button>
<Transition
show={dropdownOpen}
tag="div"
className="z-10 absolute top-full right-0 w-full bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1"
enter="transition ease-out duration-100 transform"
enterStart="opacity-0 -translate-y-2"
enterEnd="opacity-100 translate-y-0"
leave="transition ease-out duration-100"
leaveStart="opacity-100"
leaveEnd="opacity-0"
>
<div
ref={dropdown}
className="font-medium text-sm text-slate-600"
onFocus={() => setDropdownOpen(true)}
onBlur={() => setDropdownOpen(false)}
>
{
options.map(option => {
return (
<button
key={option.id}
tabIndex="0"
className={`flex items-center w-full hover:bg-slate-50 py-1 px-3 cursor-pointer ${option.id === selected && 'text-indigo-500'}`}
onClick={() => { setSelected(option.id); setDropdownOpen(false); }}
>
<svg className={`shrink-0 mr-2 fill-current text-indigo-500 ${option.id !== selected && 'invisible'}`} width="12" height="9" viewBox="0 0 12 9">
<path d="M10.28.28L3.989 6.575 1.695 4.28A1 1 0 00.28 5.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28.28z" />
</svg>
<span>{option.period}</span>
</button>
)
})
}
</div>
</Transition>
</div>
);
}
export default DateSelect;

113
src/components/DropdownClassic.jsx
View File

@@ -1,113 +0,0 @@
import React, { useState, useRef, useEffect } from 'react';
import Transition from '../utils/Transition';
function DropdownClassic() {
const options = [
{
id: 0,
period: 'Today'
},
{
id: 1,
period: 'Last 7 Days'
},
{
id: 2,
period: 'Last Month'
},
{
id: 3,
period: 'Last 12 Months'
},
{
id: 4,
period: 'All Time'
}
];
const [dropdownOpen, setDropdownOpen] = useState(false);
const [selected, setSelected] = useState(2);
const trigger = useRef(null);
const dropdown = useRef(null);
// close on click outside
useEffect(() => {
const clickHandler = ({ target }) => {
if (!dropdown.current) return;
if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
setDropdownOpen(false);
};
document.addEventListener('click', clickHandler);
return () => document.removeEventListener('click', clickHandler);
});
// close if the esc key is pressed
useEffect(() => {
const keyHandler = ({ keyCode }) => {
if (!dropdownOpen || keyCode !== 27) return;
setDropdownOpen(false);
};
document.addEventListener('keydown', keyHandler);
return () => document.removeEventListener('keydown', keyHandler);
});
return (
<div className="relative inline-flex">
<button
ref={trigger}
className="btn justify-between min-w-44 bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600"
aria-label="Select date range"
aria-haspopup="true"
onClick={() => setDropdownOpen(!dropdownOpen)}
aria-expanded={dropdownOpen}
>
<span className="flex items-center">
<span>{options[selected].period}</span>
</span>
<svg className="shrink-0 ml-1 fill-current text-slate-400" width="11" height="7" viewBox="0 0 11 7">
<path d="M5.4 6.8L0 1.4 1.4 0l4 4 4-4 1.4 1.4z" />
</svg>
</button>
<Transition
show={dropdownOpen}
tag="div"
className="z-10 absolute top-full left-0 w-full bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1"
enter="transition ease-out duration-100 transform"
enterStart="opacity-0 -translate-y-2"
enterEnd="opacity-100 translate-y-0"
leave="transition ease-out duration-100"
leaveStart="opacity-100"
leaveEnd="opacity-0"
>
<div
ref={dropdown}
className="font-medium text-sm text-slate-600"
onFocus={() => setDropdownOpen(true)}
onBlur={() => setDropdownOpen(false)}
>
{
options.map(option => {
return (
<button
key={option.id}
tabIndex="0"
className={`flex items-center w-full hover:bg-slate-50 py-1 px-3 cursor-pointer ${option.id === selected && 'text-indigo-500'}`}
onClick={() => { setSelected(option.id); setDropdownOpen(false); }}
>
<svg className={`shrink-0 mr-2 fill-current text-indigo-500 ${option.id !== selected && 'invisible'}`} width="12" height="9" viewBox="0 0 12 9">
<path d="M10.28.28L3.989 6.575 1.695 4.28A1 1 0 00.28 5.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28.28z" />
</svg>
<span>{option.period}</span>
</button>
)
})
}
</div>
</Transition>
</div>
);
}
export default DropdownClassic;

109
src/components/DropdownFull.jsx
View File

@@ -1,109 +0,0 @@
import React, { useState, useRef, useEffect } from 'react';
import Transition from '../utils/Transition';
function DropdownFull() {
const options = [
{
id: 0,
period: 'Most Popular'
},
{
id: 1,
period: 'Newest'
},
{
id: 2,
period: 'Lowest Price'
},
{
id: 3,
period: 'Highest Price'
}
];
const [dropdownOpen, setDropdownOpen] = useState(false);
const [selected, setSelected] = useState(0);
const trigger = useRef(null);
const dropdown = useRef(null);
// close on click outside
useEffect(() => {
const clickHandler = ({ target }) => {
if (!dropdown.current) return;
if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
setDropdownOpen(false);
};
document.addEventListener('click', clickHandler);
return () => document.removeEventListener('click', clickHandler);
});
// close if the esc key is pressed
useEffect(() => {
const keyHandler = ({ keyCode }) => {
if (!dropdownOpen || keyCode !== 27) return;
setDropdownOpen(false);
};
document.addEventListener('keydown', keyHandler);
return () => document.removeEventListener('keydown', keyHandler);
});
return (
<div className="relative inline-flex w-full">
<button
ref={trigger}
className="btn w-full justify-between min-w-44 bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600"
aria-label="Select date range"
aria-haspopup="true"
onClick={() => setDropdownOpen(!dropdownOpen)}
aria-expanded={dropdownOpen}
>
<span className="flex items-center">
<span>{options[selected].period}</span>
</span>
<svg className="shrink-0 ml-1 fill-current text-slate-400" width="11" height="7" viewBox="0 0 11 7">
<path d="M5.4 6.8L0 1.4 1.4 0l4 4 4-4 1.4 1.4z" />
</svg>
</button>
<Transition
show={dropdownOpen}
tag="div"
className="z-10 absolute top-full left-0 w-full bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1"
enter="transition ease-out duration-100 transform"
enterStart="opacity-0 -translate-y-2"
enterEnd="opacity-100 translate-y-0"
leave="transition ease-out duration-100"
leaveStart="opacity-100"
leaveEnd="opacity-0"
>
<div
ref={dropdown}
className="font-medium text-sm text-slate-600 divide-y divide-slate-200"
onFocus={() => setDropdownOpen(true)}
onBlur={() => setDropdownOpen(false)}
>
{
options.map(option => {
return (
<button
key={option.id}
tabIndex="0"
className={`flex items-center justify-between w-full hover:bg-slate-50 py-2 px-3 cursor-pointer ${option.id === selected && 'text-indigo-500'}`}
onClick={() => { setSelected(option.id); setDropdownOpen(false); }}
>
<span>{option.period}</span>
<svg className={`shrink-0 mr-2 fill-current text-indigo-500 ${option.id !== selected && 'invisible'}`} width="12" height="9" viewBox="0 0 12 9">
<path d="M10.28.28L3.989 6.575 1.695 4.28A1 1 0 00.28 5.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28.28z" />
</svg>
</button>
)
})
}
</div>
</Transition>
</div>
);
}
export default DropdownFull;

6
src/components/DropdownProfile.jsx
View File

@@ -75,7 +75,7 @@ function DropdownProfile({
<li>
<Link
className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
to="/settings"
to="/"
onClick={() => setDropdownOpen(!dropdownOpen)}
>
Settings
@@ -84,7 +84,7 @@ function DropdownProfile({
<li>
<Link
className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
to="/signin"
to="/"
onClick={() => setDropdownOpen(!dropdownOpen)}
>
Sign Out
@@ -97,4 +97,4 @@ function DropdownProfile({
)
}
export default DropdownProfile;
export default DropdownProfile;

90
src/components/DropdownSort.jsx
View File

@@ -1,90 +0,0 @@
import React, { useState, useRef, useEffect } from 'react';
import Transition from '../utils/Transition';
function DropdownSort({
align
}) {
const [dropdownOpen, setDropdownOpen] = useState(false);
const trigger = useRef(null);
const dropdown = useRef(null);
// close on click outside
useEffect(() => {
const clickHandler = ({ target }) => {
if (!dropdown.current) return;
if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
setDropdownOpen(false);
};
document.addEventListener('click', clickHandler);
return () => document.removeEventListener('click', clickHandler);
});
// close if the esc key is pressed
useEffect(() => {
const keyHandler = ({ keyCode }) => {
if (!dropdownOpen || keyCode !== 27) return;
setDropdownOpen(false);
};
document.addEventListener('keydown', keyHandler);
return () => document.removeEventListener('keydown', keyHandler);
});
return (
<div className="relative inline-flex">
<button
ref={trigger}
className="inline-flex justify-center items-center group"
aria-haspopup="true"
onClick={() => setDropdownOpen(!dropdownOpen)}
aria-expanded={dropdownOpen}
>
<div className="flex items-center truncate">
<span className="truncate font-medium text-indigo-500 group-hover:text-indigo-600">Newest</span>
<svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
</button>
<Transition
className={`origin-top-right z-10 absolute top-full bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${
align === 'right' ? 'right-0' : 'left-0'
}`}
show={dropdownOpen}
enter="transition ease-out duration-200 transform"
enterStart="opacity-0 -translate-y-2"
enterEnd="opacity-100 translate-y-0"
leave="transition ease-out duration-200"
leaveStart="opacity-100"
leaveEnd="opacity-0"
>
<div ref={dropdown} onFocus={() => setDropdownOpen(true)} onBlur={() => setDropdownOpen(false)}>
<ul>
<li>
<a
className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3"
href="#0"
onClick={() => setDropdownOpen(!dropdownOpen)}
>
Oldest
</a>
</li>
<li>
<a
className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3"
href="#0"
onClick={() => setDropdownOpen(!dropdownOpen)}
>
Popular
</a>
</li>
</ul>
</div>
</Transition>
</div>
);
}
export default DropdownSort;

110
src/components/DropdownSwitch.jsx
View File

@@ -1,110 +0,0 @@
import React, { useState, useRef, useEffect } from 'react';
import Transition from '../utils/Transition';
import DropdownImage from '../images/user-avatar-32.png';
import DropdownImage01 from '../images/channel-01.png';
import DropdownImage02 from '../images/channel-02.png';
import DropdownImage03 from '../images/channel-03.png';
function DropdownSwitch({
align
}) {
const [dropdownOpen, setDropdownOpen] = useState(false);
const trigger = useRef(null);
const dropdown = useRef(null);
// close on click outside
useEffect(() => {
const clickHandler = ({ target }) => {
if (!dropdown.current) return;
if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
setDropdownOpen(false);
};
document.addEventListener('click', clickHandler);
return () => document.removeEventListener('click', clickHandler);
});
// close if the esc key is pressed
useEffect(() => {
const keyHandler = ({ keyCode }) => {
if (!dropdownOpen || keyCode !== 27) return;
setDropdownOpen(false);
};
document.addEventListener('keydown', keyHandler);
return () => document.removeEventListener('keydown', keyHandler);
});
return (
<div className="relative">
<button
ref={trigger}
className="grow flex items-center truncate"
aria-haspopup="true"
onClick={() => setDropdownOpen(!dropdownOpen)}
aria-expanded={dropdownOpen}
>
<img className="w-8 h-8 rounded-full mr-2" src={DropdownImage} width="32" height="32" alt="Group 01" />
<div className="truncate">
<span className="text-sm font-medium">Acme Inc.</span>
</div>
<svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</button>
<Transition
className={`origin-top-right z-10 absolute top-full min-w-60 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${align === 'right' ? 'right-0' : 'left-0'}`}
show={dropdownOpen}
enter="transition ease-out duration-200 transform"
enterStart="opacity-0 -translate-y-2"
enterEnd="opacity-100 translate-y-0"
leave="transition ease-out duration-200"
leaveStart="opacity-100"
leaveEnd="opacity-0"
>
<ul
ref={dropdown}
onFocus={() => setDropdownOpen(true)}
onBlur={() => setDropdownOpen(false)}
>
<li>
<a className="font-medium text-sm text-slate-600 hover:text-slate-800 block py-1.5 px-3" href="#0" onClick={() => setDropdownOpen(false)}>
<div className="flex items-center justify-between">
<div className="grow flex items-center truncate">
<img className="w-7 h-7 rounded-full mr-2" src={DropdownImage01} width="28" height="28" alt="Channel 01" />
<div className="truncate">Acme Inc.</div>
</div>
<svg className="w-3 h-3 shrink-0 fill-current text-indigo-500 ml-1" viewBox="0 0 12 12">
<path d="M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z" />
</svg>
</div>
</a>
</li>
<li>
<a className="font-medium text-sm text-slate-600 hover:text-slate-800 block py-1.5 px-3" href="#0" onClick={() => setDropdownOpen(false)}>
<div className="flex items-center justify-between">
<div className="grow flex items-center truncate">
<img className="w-7 h-7 rounded-full mr-2" src={DropdownImage02} width="28" height="28" alt="Channel 02" />
<div className="truncate">Acme Limited</div>
</div>
</div>
</a>
</li>
<li>
<a className="font-medium text-sm text-slate-600 hover:text-slate-800 block py-1.5 px-3" href="#0" onClick={() => setDropdownOpen(false)}>
<div className="flex items-center justify-between">
<div className="grow flex items-center truncate">
<img className="w-7 h-7 rounded-full mr-2" src={DropdownImage03} width="28" height="28" alt="Channel 03" />
<div className="truncate">Acme Srl</div>
</div>
</div>
</a>
</li>
</ul>
</Transition>
</div>
)
}
export default DropdownSwitch;

90
src/components/DropdownTransaction.jsx
View File

@@ -1,90 +0,0 @@
import React, { useState, useRef, useEffect } from 'react';
import Transition from '../utils/Transition';
function DropdownTransaction({
align
}) {
const [dropdownOpen, setDropdownOpen] = useState(false);
const trigger = useRef(null);
const dropdown = useRef(null);
// close on click outside
useEffect(() => {
const clickHandler = ({ target }) => {
if (!dropdown.current) return;
if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
setDropdownOpen(false);
};
document.addEventListener('click', clickHandler);
return () => document.removeEventListener('click', clickHandler);
});
// close if the esc key is pressed
useEffect(() => {
const keyHandler = ({ keyCode }) => {
if (!dropdownOpen || keyCode !== 27) return;
setDropdownOpen(false);
};
document.addEventListener('keydown', keyHandler);
return () => document.removeEventListener('keydown', keyHandler);
});
return (
<div className="relative inline-flex">
<button
ref={trigger}
className="inline-flex justify-center items-center group"
aria-haspopup="true"
onClick={() => setDropdownOpen(!dropdownOpen)}
aria-expanded={dropdownOpen}
>
<div className="flex items-center truncate">
<span className="truncate font-medium text-indigo-500 group-hover:text-indigo-600">My Personal Account</span>
<svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
</button>
<Transition
className={`origin-top-right z-10 absolute top-full min-w-44 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${
align === 'right' ? 'right-0' : 'left-0'
}`}
show={dropdownOpen}
enter="transition ease-out duration-200 transform"
enterStart="opacity-0 -translate-y-2"
enterEnd="opacity-100 translate-y-0"
leave="transition ease-out duration-200"
leaveStart="opacity-100"
leaveEnd="opacity-0"
>
<div ref={dropdown} onFocus={() => setDropdownOpen(true)} onBlur={() => setDropdownOpen(false)}>
<ul>
<li>
<a
className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3"
href="#0"
onClick={() => setDropdownOpen(!dropdownOpen)}
>
Business Account
</a>
</li>
<li>
<a
className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3"
href="#0"
onClick={() => setDropdownOpen(!dropdownOpen)}
>
Family Account
</a>
</li>
</ul>
</div>
</Transition>
</div>
);
}
export default DropdownTransaction;

80
src/components/ModalAction.jsx
View File

@@ -1,80 +0,0 @@
import React, { useRef, useEffect } from 'react';
import Transition from '../utils/Transition';
function ModalAction({
children,
id,
modalOpen,
setModalOpen
}) {
const modalContent = useRef(null);
// close on click outside
useEffect(() => {
const clickHandler = ({ target }) => {
if (!modalOpen || modalContent.current.contains(target)) return
setModalOpen(false);
};
document.addEventListener('click', clickHandler);
return () => document.removeEventListener('click', clickHandler);
});
// close if the esc key is pressed
useEffect(() => {
const keyHandler = ({ keyCode }) => {
if (!modalOpen || keyCode !== 27) return;
setModalOpen(false);
};
document.addEventListener('keydown', keyHandler);
return () => document.removeEventListener('keydown', keyHandler);
});
return (
<>
{/* Modal backdrop */}
<Transition
className="fixed inset-0 bg-slate-900 bg-opacity-30 z-50 transition-opacity"
show={modalOpen}
enter="transition ease-out duration-200"
enterStart="opacity-0"
enterEnd="opacity-100"
leave="transition ease-out duration-100"
leaveStart="opacity-100"
leaveEnd="opacity-0"
aria-hidden="true"
/>
{/* Modal dialog */}
<Transition
id={id}
className="fixed inset-0 z-50 overflow-hidden flex items-center my-4 justify-center transform px-4 sm:px-6"
role="dialog"
aria-modal="true"
show={modalOpen}
enter="transition ease-in-out duration-200"
enterStart="opacity-0 translate-y-4"
enterEnd="opacity-100 translate-y-0"
leave="transition ease-in-out duration-200"
leaveStart="opacity-100 translate-y-0"
leaveEnd="opacity-0 translate-y-4"
>
<div ref={modalContent} className="bg-white rounded shadow-lg overflow-auto max-w-lg w-full max-h-full">
<div className="p-6">
<div className="relative">
{/* Close button */}
<button className="absolute top-0 right-0 text-slate-400 hover:text-slate-500" onClick={(e) => { e.stopPropagation(); setModalOpen(false); }}>
<div className="sr-only">Close</div>
<svg className="w-4 h-4 fill-current">
<path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
</svg>
</button>
{children}
</div>
</div>
</div>
</Transition>
</>
);
}
export default ModalAction;

82
src/components/ModalBasic.jsx
View File

@@ -1,82 +0,0 @@
import React, { useRef, useEffect } from 'react';
import Transition from '../utils/Transition';
function ModalBasic({
children,
id,
title,
modalOpen,
setModalOpen
}) {
const modalContent = useRef(null);
// close on click outside
useEffect(() => {
const clickHandler = ({ target }) => {
if (!modalOpen || modalContent.current.contains(target)) return
setModalOpen(false);
};
document.addEventListener('click', clickHandler);
return () => document.removeEventListener('click', clickHandler);
});
// close if the esc key is pressed
useEffect(() => {
const keyHandler = ({ keyCode }) => {
if (!modalOpen || keyCode !== 27) return;
setModalOpen(false);
};
document.addEventListener('keydown', keyHandler);
return () => document.removeEventListener('keydown', keyHandler);
});
return (
<>
{/* Modal backdrop */}
<Transition
className="fixed inset-0 bg-slate-900 bg-opacity-30 z-50 transition-opacity"
show={modalOpen}
enter="transition ease-out duration-200"
enterStart="opacity-0"
enterEnd="opacity-100"
leave="transition ease-out duration-100"
leaveStart="opacity-100"
leaveEnd="opacity-0"
aria-hidden="true"
/>
{/* Modal dialog */}
<Transition
id={id}
className="fixed inset-0 z-50 overflow-hidden flex items-center my-4 justify-center transform px-4 sm:px-6"
role="dialog"
aria-modal="true"
show={modalOpen}
enter="transition ease-in-out duration-200"
enterStart="opacity-0 translate-y-4"
enterEnd="opacity-100 translate-y-0"
leave="transition ease-in-out duration-200"
leaveStart="opacity-100 translate-y-0"
leaveEnd="opacity-0 translate-y-4"
>
<div ref={modalContent} className="bg-white rounded shadow-lg overflow-auto max-w-lg w-full max-h-full">
{/* Modal header */}
<div className="px-5 py-3 border-b border-slate-200">
<div className="flex justify-between items-center">
<div className="font-semibold text-slate-800">{title}</div>
<button className="text-slate-400 hover:text-slate-500" onClick={(e) => { e.stopPropagation(); setModalOpen(false); }}>
<div className="sr-only">Close</div>
<svg className="w-4 h-4 fill-current">
<path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
</svg>
</button>
</div>
</div>
{children}
</div>
</Transition>
</>
);
}
export default ModalBasic;

69
src/components/ModalBlank.jsx
View File

@@ -1,69 +0,0 @@
import React, { useRef, useEffect } from 'react';
import Transition from '../utils/Transition';
function ModalBlank({
children,
id,
modalOpen,
setModalOpen
}) {
const modalContent = useRef(null);
// close on click outside
useEffect(() => {
const clickHandler = ({ target }) => {
if (!modalOpen || modalContent.current.contains(target)) return
setModalOpen(false);
};
document.addEventListener('click', clickHandler);
return () => document.removeEventListener('click', clickHandler);
});
// close if the esc key is pressed
useEffect(() => {
const keyHandler = ({ keyCode }) => {
if (!modalOpen || keyCode !== 27) return;
setModalOpen(false);
};
document.addEventListener('keydown', keyHandler);
return () => document.removeEventListener('keydown', keyHandler);
});
return (
<>
{/* Modal backdrop */}
<Transition
className="fixed inset-0 bg-slate-900 bg-opacity-30 z-50 transition-opacity"
show={modalOpen}
enter="transition ease-out duration-200"
enterStart="opacity-0"
enterEnd="opacity-100"
leave="transition ease-out duration-100"
leaveStart="opacity-100"
leaveEnd="opacity-0"
aria-hidden="true"
/>
{/* Modal dialog */}
<Transition
id={id}
className="fixed inset-0 z-50 overflow-hidden flex items-center my-4 justify-center transform px-4 sm:px-6"
role="dialog"
aria-modal="true"
show={modalOpen}
enter="transition ease-in-out duration-200"
enterStart="opacity-0 translate-y-4"
enterEnd="opacity-100 translate-y-0"
leave="transition ease-in-out duration-200"
leaveStart="opacity-100 translate-y-0"
leaveEnd="opacity-0 translate-y-4"
>
<div ref={modalContent} className="bg-white rounded shadow-lg overflow-auto max-w-lg w-full max-h-full">
{children}
</div>
</Transition>
</>
);
}
export default ModalBlank;

84
src/components/ModalCookies.jsx
View File

@@ -1,84 +0,0 @@
import React, { useRef, useEffect } from 'react';
import Transition from '../utils/Transition';
function ModalCookies({
children,
id,
title,
modalOpen,
setModalOpen
}) {
const modalContent = useRef(null);
// close on click outside
useEffect(() => {
const clickHandler = ({ target }) => {
if (!modalOpen || modalContent.current.contains(target)) return
setModalOpen(false);
};
document.addEventListener('click', clickHandler);
return () => document.removeEventListener('click', clickHandler);
});
// close if the esc key is pressed
useEffect(() => {
const keyHandler = ({ keyCode }) => {
if (!modalOpen || keyCode !== 27) return;
setModalOpen(false);
};
document.addEventListener('keydown', keyHandler);
return () => document.removeEventListener('keydown', keyHandler);
});
return (
<>
{/* Modal backdrop */}
<Transition
className="fixed inset-0 bg-slate-900 bg-opacity-30 z-50 transition-opacity"
show={modalOpen}
enter="transition ease-out duration-200"
enterStart="opacity-0"
enterEnd="opacity-100"
leave="transition ease-out duration-100"
leaveStart="opacity-100"
leaveEnd="opacity-0"
aria-hidden="true"
/>
{/* Modal dialog */}
<Transition
id={id}
className="fixed inset-0 z-50 overflow-hidden flex items-center my-4 justify-center transform px-4 sm:px-6"
role="dialog"
aria-modal="true"
show={modalOpen}
enter="transition ease-in-out duration-200"
enterStart="opacity-0 translate-y-4"
enterEnd="opacity-100 translate-y-0"
leave="transition ease-in-out duration-200"
leaveStart="opacity-100 translate-y-0"
leaveEnd="opacity-0 translate-y-4"
>
<div ref={modalContent} className="bg-white rounded shadow-lg overflow-auto max-w-lg w-full max-h-full">
<div className="p-5">
{/* Modal header */}
<div className="mb-2">
<div className="flex justify-between items-center">
<div className="text-lg font-semibold text-slate-800">{title}</div>
<button className="text-slate-400 hover:text-slate-500" onClick={(e) => { e.stopPropagation(); setModalOpen(false); }}>
<div className="sr-only">Close</div>
<svg className="w-4 h-4 fill-current">
<path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
</svg>
</button>
</div>
</div>
{children}
</div>
</div>
</Transition>
</>
);
}
export default ModalCookies;

69
src/components/Notification.jsx
View File

@@ -1,69 +0,0 @@
import React from 'react';
function Notification({
children,
className,
type,
open,
setOpen
}) {
const typeIcon = (type) => {
switch (type) {
case 'warning':
return (
<svg className="w-4 h-4 shrink-0 fill-current text-amber-500 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
</svg>
);
case 'error':
return (
<svg className="w-4 h-4 shrink-0 fill-current text-rose-500 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
</svg>
);
case 'success':
return (
<svg className="w-4 h-4 shrink-0 fill-current text-emerald-500 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
</svg>
);
default:
return (
<svg className="w-4 h-4 shrink-0 fill-current text-indigo-500 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
</svg>
);
}
};
return (
<>
{open &&
<div className={className}>
<div className="inline-flex flex-col max-w-lg px-4 py-2 rounded-sm text-sm bg-white shadow-lg border border-slate-200 text-slate-600">
<div className="flex w-full justify-between items-start">
<div className="flex">
{typeIcon(type)}
<div>
{children}
</div>
</div>
<button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
<div className="sr-only">Close</div>
<svg className="w-4 h-4 fill-current">
<path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
</svg>
</button>
</div>
<div className="text-right mt-1">
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">Action -&gt;</a>
</div>
</div>
</div>
}
</>
);
}
export default Notification;

23
src/components/PaginationClassic.jsx
View File

@@ -1,23 +0,0 @@
import React from 'react';
function PaginationClassic() {
return (
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
<nav className="mb-4 sm:mb-0 sm:order-1" role="navigation" aria-label="Navigation">
<ul className="flex justify-center">
<li className="ml-3 first:ml-0">
<a className="btn bg-white border-slate-200 text-slate-300 cursor-not-allowed" href="#0" disabled>&lt;- Previous</a>
</li>
<li className="ml-3 first:ml-0">
<a className="btn bg-white border-slate-200 hover:border-slate-300 text-indigo-500" href="#0">Next -&gt;</a>
</li>
</ul>
</nav>
<div className="text-sm text-slate-500 text-center sm:text-left">
Showing <span className="font-medium text-slate-600">1</span> to <span className="font-medium text-slate-600">10</span> of <span className="font-medium text-slate-600">467</span> results
</div>
</div>
);
}
export default PaginationClassic;

45
src/components/PaginationNumeric.jsx
View File

@@ -1,45 +0,0 @@
import React from 'react';
function PaginationNumeric() {
return (
<div className="flex justify-center">
<nav className="flex" role="navigation" aria-label="Navigation">
<div className="mr-2">
<span className="inline-flex items-center justify-center rounded leading-5 px-2.5 py-2 bg-white border border-slate-200 text-slate-300">
<span className="sr-only">Previous</span><wbr />
<svg className="h-4 w-4 fill-current" viewBox="0 0 16 16">
<path d="M9.4 13.4l1.4-1.4-4-4 4-4-1.4-1.4L4 8z" />
</svg>
</span>
</div>
<ul className="inline-flex text-sm font-medium -space-x-px shadow-sm">
<li>
<span className="inline-flex items-center justify-center rounded-l leading-5 px-3.5 py-2 bg-white border border-slate-200 text-indigo-500">1</span>
</li>
<li>
<a className="inline-flex items-center justify-center leading-5 px-3.5 py-2 bg-white hover:bg-indigo-500 border border-slate-200 text-slate-600 hover:text-white" href="#0">2</a>
</li>
<li>
<a className="inline-flex items-center justify-center leading-5 px-3.5 py-2 bg-white hover:bg-indigo-500 border border-slate-200 text-slate-600 hover:text-white" href="#0">3</a>
</li>
<li>
<span className="inline-flex items-center justify-center leading-5 px-3.5 py-2 bg-white border border-slate-200 text-slate-400">…</span>
</li>
<li>
<a className="inline-flex items-center justify-center rounded-r leading-5 px-3.5 py-2 bg-white hover:bg-indigo-500 border border-slate-200 text-slate-600 hover:text-white" href="#0">9</a>
</li>
</ul>
<div className="ml-2">
<a href="#0" className="inline-flex items-center justify-center rounded leading-5 px-2.5 py-2 bg-white hover:bg-indigo-500 border border-slate-200 text-slate-600 hover:text-white shadow-sm">
<span className="sr-only">Next</span><wbr />
<svg className="h-4 w-4 fill-current" viewBox="0 0 16 16">
<path d="M6.6 13.4L5.2 12l4-4-4-4 1.4-1.4L12 8z" />
</svg>
</a>
</div>
</nav>
</div>
);
}
export default PaginationNumeric;

37
src/components/PaginationNumeric2.jsx
View File

@@ -1,37 +0,0 @@
import React from 'react';
function PaginationNumeric2() {
return (
<div>
<nav className="flex justify-between" role="navigation" aria-label="Navigation">
<div className="flex-1 mr-2">
<a className="btn bg-white border-slate-200 text-slate-300 cursor-not-allowed" href="#0" disabled>&lt;-<span className="hidden sm:inline">&nbsp;Previous</span></a>
</div>
<div className="grow text-center">
<ul className="inline-flex text-sm font-medium -space-x-px">
<li>
<span className="inline-flex items-center justify-center rounded-full leading-5 px-2 py-2 bg-white border border-slate-200 text-indigo-500 shadow-sm"><span className="w-5">1</span></span>
</li>
<li>
<a className="inline-flex items-center justify-center leading-5 px-2 py-2 text-slate-600 hover:text-indigo-500 border border-transparent" href="#0"><span className="w-5">2</span></a>
</li>
<li>
<a className="inline-flex items-center justify-center leading-5 px-2 py-2 text-slate-600 hover:text-indigo-500 border border-transparent" href="#0"><span className="w-5">3</span></a>
</li>
<li>
<span className="inline-flex items-center justify-center leading-5 px-2 py-2 text-slate-400">…</span>
</li>
<li>
<a className="inline-flex items-center justify-center rounded-r leading-5 px-2 py-2 text-slate-600 hover:text-indigo-500 border border-transparent" href="#0"><span className="w-5">9</span></a>
</li>
</ul>
</div>
<div className="flex-1 text-right ml-2">
<a className="btn bg-white border-slate-200 hover:border-slate-300 text-indigo-500" href="#0"><span className="hidden sm:inline">Next&nbsp;</span>-&gt;</a>
</div>
</nav>
</div>
);
}
export default PaginationNumeric2;

79
src/components/Toast.jsx
View File

@@ -1,79 +0,0 @@
import React from 'react';
function Toast({
children,
className,
type,
open,
setOpen
}) {
const typeIcon = (type) => {
switch (type) {
case 'warning':
return (
<svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
</svg>
);
case 'error':
return (
<svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
</svg>
);
case 'success':
return (
<svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
</svg>
);
default:
return (
<svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
</svg>
);
}
};
const typeColor = (type) => {
switch (type) {
case 'warning':
return 'bg-amber-500';
case 'error':
return 'bg-rose-500';
case 'success':
return 'bg-emerald-500';
default:
return 'bg-indigo-500';
}
};
return (
<>
{open &&
<div className={className}>
<div className={`inline-flex min-w-80 px-4 py-2 rounded-sm text-sm text-white ${typeColor(type)}`}>
<div className="flex w-full justify-between items-start">
<div className="flex">
{typeIcon(type)}
<div className="font-medium">
{children}
</div>
</div>
<button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
<div className="sr-only">Close</div>
<svg className="w-4 h-4 fill-current">
<path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
</svg>
</button>
</div>
</div>
</div>
}
</>
);
}
export default Toast;

79
src/components/Toast2.jsx
View File

@@ -1,79 +0,0 @@
import React from 'react';
function Toast2({
children,
className,
type,
open,
setOpen
}) {
const typeIcon = (type) => {
switch (type) {
case 'warning':
return (
<svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
</svg>
);
case 'error':
return (
<svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
</svg>
);
case 'success':
return (
<svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
</svg>
);
default:
return (
<svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
</svg>
);
}
};
const typeColor = (type) => {
switch (type) {
case 'warning':
return 'bg-amber-100 border-amber-200 text-amber-600';
case 'error':
return 'bg-rose-100 border-rose-200 text-rose-600';
case 'success':
return 'bg-emerald-100 border-emerald-200 text-emerald-600';
default:
return 'bg-indigo-100 border-indigo-200 text-indigo-500';
}
};
return (
<>
{open &&
<div className={className}>
<div className={`inline-flex min-w-80 px-4 py-2 rounded-sm text-sm border ${typeColor(type)}`}>
<div className="flex w-full justify-between items-start">
<div className="flex">
{typeIcon(type)}
<div>
{children}
</div>
</div>
<button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
<div className="sr-only">Close</div>
<svg className="w-4 h-4 fill-current">
<path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
</svg>
</button>
</div>
</div>
</div>
}
</>
);
}
export default Toast2;

66
src/components/Toast3.jsx
View File

@@ -1,66 +0,0 @@
import React from 'react';
function Toast3({
children,
className,
type,
open,
setOpen
}) {
const typeIcon = (type) => {
switch (type) {
case 'warning':
return (
<svg className="w-4 h-4 shrink-0 fill-current text-amber-500 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
</svg>
);
case 'error':
return (
<svg className="w-4 h-4 shrink-0 fill-current text-rose-500 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
</svg>
);
case 'success':
return (
<svg className="w-4 h-4 shrink-0 fill-current text-emerald-500 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
</svg>
);
default:
return (
<svg className="w-4 h-4 shrink-0 fill-current text-indigo-500 mt-[3px] mr-3" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
</svg>
);
}
};
return (
<>
{open &&
<div className={className}>
<div className="inline-flex min-w-80 px-4 py-2 rounded-sm text-sm bg-white shadow-lg border border-slate-200 text-slate-600">
<div className="flex w-full justify-between items-start">
<div className="flex">
{typeIcon(type)}
<div>
{children}
</div>
</div>
<button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
<div className="sr-only">Close</div>
<svg className="w-4 h-4 fill-current">
<path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
</svg>
</button>
</div>
</div>
</div>
}
</>
);
}
export default Toast3;