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

clean up and bug fixes

Browse Source
This commit is contained in:
kandrusyak
2022-08-09 17:52:03 +03:00
parent 59dd4c9554
commit 27ee899402
88 changed files with 31 additions and 8373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/AccordionBasic.jsx
View File

@@ -1,26 +0,0 @@
import React, { useState } from 'react';
function AccordionBasic(props) {
const [open, setOpen] = useState(false);
return (
<div className="px-5 py-4 rounded-sm border border-slate-200">
<button
className="flex items-center justify-between w-full group mb-1"
aria-expanded={open}
onClick={() => setOpen(!open)}
>
<div className="text-sm text-slate-800 font-medium">{props.title}</div>
<svg className={`w-8 h-8 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 ${open && 'rotate-180'}`} viewBox="0 0 32 32">
<path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
</svg>
</button>
<div className={`text-sm ${!open && 'hidden'}`}>
{props.children}
</div>
</div>
);
}
export default AccordionBasic;

73
src/components/AccordionTableItem.jsx
View File

@@ -1,73 +0,0 @@
import React, { useState } from 'react';
function AccordionTableItem(props) {
const [open, setOpen] = useState(false);
return (
<tbody className="text-sm">
<tr>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<div className="flex items-center text-slate-800">
<div className="w-10 h-10 shrink-0 flex items-center justify-center bg-slate-100 rounded-full mr-2 sm:mr-3">
<img className="rounded-full ml-1" src={props.image} width="40" height="40" alt={props.customer} />
</div>
<div className="font-medium text-slate-800">{props.customer}</div>
</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<div className="text-left font-medium text-emerald-500">{props.total}</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<div className="inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-0.5">{props.status}</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<div className="text-center">{props.items}</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<div className="text-left">{props.location}</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<div className="flex items-center">
<svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
<path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
</svg>
<div>{props.type}</div>
</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
<div className="flex items-center">
<button
className={`text-slate-400 hover:text-slate-500 transform ${open && 'rotate-180'}`}
aria-expanded={open}
onClick={() => setOpen(!open)}
aria-controls={`description-${props.id}`}
>
<span className="sr-only">Menu</span>
<svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
<path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
</svg>
</button>
</div>
</td>
</tr>
{/*
Example of content revealing when clicking the button on the right side:
Note that you must set a "colSpan" attribute on the <td> element,
and it should match the number of columns in your table
*/}
<tr id={`description-${props.id}`} role="region" className={`${!open && 'hidden'}`}>
<td colSpan="10" className="px-2 first:pl-5 last:pr-5 py-3">
<div className="flex items-center bg-slate-50 p-3 -mt-3">
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2">
<path d="M1 16h3c.3 0 .5-.1.7-.3l11-11c.4-.4.4-1 0-1.4l-3-3c-.4-.4-1-.4-1.4 0l-11 11c-.2.2-.3.4-.3.7v3c0 .6.4 1 1 1zm1-3.6l10-10L13.6 4l-10 10H2v-1.6z" />
</svg>
<div className="italic">{props.description}</div>
</div>
</td>
</tr>
</tbody>
);
}
export default AccordionTableItem;

66
src/components/AccordionTableRichItem.jsx
View File

@@ -1,66 +0,0 @@
import React, { useState } from 'react';
function AccordionTableRichItem(props) {
const [open, setOpen] = useState(false);
return (
<tbody className="text-sm">
<tr>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<div className="flex items-center text-slate-800">
<div className="w-10 h-10 shrink-0 flex items-center justify-center bg-slate-100 rounded-full mr-2 sm:mr-3">
<img className="rounded-full ml-1" src={props.image} width="40" height="40" alt={props.customer} />
</div>
<div className="font-medium text-slate-800">{props.customer}</div>
</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<div className="text-left">{props.email}</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<div className="text-left">{props.location}</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<div className="text-left">{props.date}</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<div className="text-left text-emerald-500 font-medium">{props.amount}</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
<div className="flex items-center">
<button
className={`text-slate-400 hover:text-slate-500 transform ${open && 'rotate-180'}`}
aria-expanded={open}
onClick={() => setOpen(!open)}
aria-controls={`description-${props.id}`}
>
<span className="sr-only">Menu</span>
<svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
<path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
</svg>
</button>
</div>
</td>
</tr>
{/*
Example of content revealing when clicking the button on the right side:
Note that you must set a "colSpan" attribute on the <td> element,
and it should match the number of columns in your table
*/}
<tr id={`description-${props.id}`} role="region" className={`${!open && 'hidden'}`}>
<td colSpan="10" className="px-2 first:pl-5 last:pr-5 py-3">
<div className="bg-slate-50 p-3 -mt-3">
<div className="text-sm mb-3">
<div className="font-medium text-slate-800 mb-1">{props.descriptionTitle}</div>
<div>{props.descriptionBody}</div>
</div>
<button className="btn-xs bg-indigo-500 hover:bg-indigo-600 text-white">Approve</button>
</div>
</td>
</tr>
</tbody>
);
}
export default AccordionTableRichItem;

38
src/components/Datepicker.jsx
View File

@@ -1,38 +0,0 @@
import React from 'react';
import Flatpickr from 'react-flatpickr';
function Datepicker({
align
}) {
const options = {
mode: 'range',
static: true,
monthSelectorType: 'static',
dateFormat: 'M j, Y',
defaultDate: [new Date().setDate(new Date().getDate() - 6), new Date()],
prevArrow: '<svg class="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M5.4 10.8l1.4-1.4-4-4 4-4L5.4 0 0 5.4z" /></svg>',
nextArrow: '<svg class="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M1.4 10.8L0 9.4l4-4-4-4L1.4 0l5.4 5.4z" /></svg>',
onReady: (selectedDates, dateStr, instance) => {
instance.element.value = dateStr.replace('to', '-');
const customClass = (align) ? align : '';
instance.calendarContainer.classList.add(`flatpickr-${customClass}`);
},
onChange: (selectedDates, dateStr, instance) => {
instance.element.value = dateStr.replace('to', '-');
},
}
return (
<div className="relative">
<Flatpickr className="form-input pl-9 text-slate-500 hover:text-slate-600 font-medium focus:border-slate-300 w-60" options={options} />
<div className="absolute inset-0 right-auto flex items-center pointer-events-none">
<svg className="w-4 h-4 fill-current text-slate-500 ml-3" 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>
</div>
</div>
);
}
export default Datepicker;

75
src/components/DropdownEditMenu.jsx
View File

@@ -1,75 +0,0 @@
import React, { useState, useRef, useEffect } from 'react';
import Transition from '../utils/Transition';
function DropdownEditMenu({
children,
align,
...rest
}) {
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 {...rest}>
<button
ref={trigger}
className={`bg-white text-slate-400 hover:text-slate-500 rounded-full ${dropdownOpen && 'bg-slate-100 text-slate-500'}`}
aria-haspopup="true"
onClick={() => setDropdownOpen(!dropdownOpen)}
aria-expanded={dropdownOpen}
>
<span className="sr-only">Menu</span>
<svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="2" />
<circle cx="10" cy="16" r="2" />
<circle cx="22" cy="16" r="2" />
</svg>
</button>
<Transition
show={dropdownOpen}
tag="div"
className={`origin-top-right z-10 absolute top-full min-w-36 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${align === 'right' ? 'right-0' : 'left-0'}`}
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)}
>
{children}
</ul>
</Transition>
</div>
);
}
export default DropdownEditMenu;

115
src/components/DropdownFilter.jsx
View File

@@ -1,115 +0,0 @@
import React, { useState, useRef, useEffect } from 'react';
import Transition from '../utils/Transition';
function DropdownFilter({
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="btn bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600"
aria-haspopup="true"
onClick={() => setDropdownOpen(!dropdownOpen)}
aria-expanded={dropdownOpen}
>
<span className="sr-only">Filter</span><wbr />
<svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
<path d="M9 15H7a1 1 0 010-2h2a1 1 0 010 2zM11 11H5a1 1 0 010-2h6a1 1 0 010 2zM13 7H3a1 1 0 010-2h10a1 1 0 010 2zM15 3H1a1 1 0 010-2h14a1 1 0 010 2z" />
</svg>
</button>
<Transition
show={dropdownOpen}
tag="div"
className={`origin-top-right z-10 absolute top-full min-w-56 bg-white border border-slate-200 pt-1.5 rounded shadow-lg overflow-hidden mt-1 ${align === 'right' ? 'right-0' : 'left-0'}`}
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}>
<div className="text-xs font-semibold text-slate-400 uppercase pt-1.5 pb-2 px-4">Filters</div>
<ul className="mb-4">
<li className="py-1 px-3">
<label className="flex items-center">
<input type="checkbox" className="form-checkbox" />
<span className="text-sm font-medium ml-2">Direct VS Indirect</span>
</label>
</li>
<li className="py-1 px-3">
<label className="flex items-center">
<input type="checkbox" className="form-checkbox" />
<span className="text-sm font-medium ml-2">Real Time Value</span>
</label>
</li>
<li className="py-1 px-3">
<label className="flex items-center">
<input type="checkbox" className="form-checkbox" />
<span className="text-sm font-medium ml-2">Top Channels</span>
</label>
</li>
<li className="py-1 px-3">
<label className="flex items-center">
<input type="checkbox" className="form-checkbox" />
<span className="text-sm font-medium ml-2">Sales VS Refunds</span>
</label>
</li>
<li className="py-1 px-3">
<label className="flex items-center">
<input type="checkbox" className="form-checkbox" />
<span className="text-sm font-medium ml-2">Last Order</span>
</label>
</li>
<li className="py-1 px-3">
<label className="flex items-center">
<input type="checkbox" className="form-checkbox" />
<span className="text-sm font-medium ml-2">Total Spent</span>
</label>
</li>
</ul>
<div className="py-2 px-3 border-t border-slate-200 bg-slate-50">
<ul className="flex items-center justify-between">
<li>
<button className="btn-xs bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600">Clear</button>
</li>
<li>
<button className="btn-xs bg-indigo-500 hover:bg-indigo-600 text-white" onClick={() => setDropdownOpen(false)} onBlur={() => setDropdownOpen(false)}>Apply</button>
</li>
</ul>
</div>
</div>
</Transition>
</div>
);
}
export default DropdownFilter;

111
src/components/DropdownHelp.jsx
View File

@@ -1,111 +0,0 @@
import React, { useState, useRef, useEffect } from 'react';
import { Link } from 'react-router-dom';
import Transition from '../utils/Transition';
function DropdownHelp({
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={`w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 transition duration-150 rounded-full ${dropdownOpen && 'bg-slate-200'}`}
aria-haspopup="true"
onClick={() => setDropdownOpen(!dropdownOpen)}
aria-expanded={dropdownOpen}
>
<span className="sr-only">Need help?</span>
<svg className="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path className="fill-current text-slate-500" 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>
</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)}
>
<div className="text-xs font-semibold text-slate-400 uppercase pt-1.5 pb-2 px-4">Need help?</div>
<ul>
<li>
<Link
className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
to="#0"
onClick={() => setDropdownOpen(!dropdownOpen)}
>
<svg className="w-3 h-3 fill-current text-indigo-300 shrink-0 mr-2" viewBox="0 0 12 12">
<rect y="3" width="12" height="9" rx="1" />
<path d="M2 0h8v2H2z" />
</svg>
<span>Documentation</span>
</Link>
</li>
<li>
<Link
className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
to="#0"
onClick={() => setDropdownOpen(!dropdownOpen)}
>
<svg className="w-3 h-3 fill-current text-indigo-300 shrink-0 mr-2" viewBox="0 0 12 12">
<path d="M10.5 0h-9A1.5 1.5 0 000 1.5v9A1.5 1.5 0 001.5 12h9a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0010.5 0zM10 7L8.207 5.207l-3 3-1.414-1.414 3-3L5 2h5v5z" />
</svg>
<span>Support Site</span>
</Link>
</li>
<li>
<Link
className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
to="#0"
onClick={() => setDropdownOpen(!dropdownOpen)}
>
<svg className="w-3 h-3 fill-current text-indigo-300 shrink-0 mr-2" viewBox="0 0 12 12">
<path d="M11.854.146a.5.5 0 00-.525-.116l-11 4a.5.5 0 00-.015.934l4.8 1.921 1.921 4.8A.5.5 0 007.5 12h.008a.5.5 0 00.462-.329l4-11a.5.5 0 00-.116-.525z" />
</svg>
<span>Contact us</span>
</Link>
</li>
</ul>
</div>
</Transition>
</div>
)
}
export default DropdownHelp;

106
src/components/DropdownNotifications.jsx
View File

@@ -1,106 +0,0 @@
import React, { useState, useRef, useEffect } from 'react';
import { Link } from 'react-router-dom';
import Transition from '../utils/Transition';
function DropdownNotifications({
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={`w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 transition duration-150 rounded-full ${dropdownOpen && 'bg-slate-200'}`}
aria-haspopup="true"
onClick={() => setDropdownOpen(!dropdownOpen)}
aria-expanded={dropdownOpen}
>
<span className="sr-only">Notifications</span>
<svg className="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path className="fill-current text-slate-500" d="M6.5 0C2.91 0 0 2.462 0 5.5c0 1.075.37 2.074 1 2.922V12l2.699-1.542A7.454 7.454 0 006.5 11c3.59 0 6.5-2.462 6.5-5.5S10.09 0 6.5 0z" />
<path className="fill-current text-slate-400" d="M16 9.5c0-.987-.429-1.897-1.147-2.639C14.124 10.348 10.66 13 6.5 13c-.103 0-.202-.018-.305-.021C7.231 13.617 8.556 14 10 14c.449 0 .886-.04 1.307-.11L15 16v-4h-.012C15.627 11.285 16 10.425 16 9.5z" />
</svg>
<div className="absolute top-0 right-0 w-2.5 h-2.5 bg-rose-500 border-2 border-white rounded-full"></div>
</button>
<Transition
className={`origin-top-right z-10 absolute top-full -mr-48 sm:mr-0 min-w-80 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)}
>
<div className="text-xs font-semibold text-slate-400 uppercase pt-1.5 pb-2 px-4">Notifications</div>
<ul>
<li className="border-b border-slate-200 last:border-0">
<Link
className="block py-2 px-4 hover:bg-slate-50"
to="#0"
onClick={() => setDropdownOpen(!dropdownOpen)}
>
<span className="block text-sm mb-2">📣 <span className="font-medium text-slate-800">Edit your information in a swipe</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
<span className="block text-xs font-medium text-slate-400">Feb 12, 2021</span>
</Link>
</li>
<li className="border-b border-slate-200 last:border-0">
<Link
className="block py-2 px-4 hover:bg-slate-50"
to="#0"
onClick={() => setDropdownOpen(!dropdownOpen)}
>
<span className="block text-sm mb-2">📣 <span className="font-medium text-slate-800">Edit your information in a swipe</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
<span className="block text-xs font-medium text-slate-400">Feb 9, 2021</span>
</Link>
</li>
<li className="border-b border-slate-200 last:border-0">
<Link
className="block py-2 px-4 hover:bg-slate-50"
to="#0"
onClick={() => setDropdownOpen(!dropdownOpen)}
>
<span className="block text-sm mb-2">🚀<span className="font-medium text-slate-800">Say goodbye to paper receipts!</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
<span className="block text-xs font-medium text-slate-400">Jan 24, 2020</span>
</Link>
</li>
</ul>
</div>
</Transition>
</div>
)
}
export default DropdownNotifications;

10
src/components/DropdownProfile.jsx
View File

@@ -75,18 +75,16 @@ import UserAvatar from '../images/user-avatar-32.png';
onBlur={() => setDropdownOpen(false)}
>
<div className="pt-0.5 pb-2 px-3 mb-1 border-b border-slate-200">
<div className="font-medium text-slate-800">Acme Inc.</div>
<div className="text-xs text-slate-500 italic">Administrator</div>
<div className="font-medium text-slate-800">{store.accountName}</div>
</div>
<ul>
<li>
<Link
className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
to="/dashboard"
<span
className="cursor-pointer font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
onClick={() => setDropdownOpen(!dropdownOpen)}
>
Settings
</Link>
</span>
</li>
<li>
<Link

197
src/components/ModalSearch.jsx
View File

@@ -1,197 +0,0 @@
import React, { useRef, useEffect } from 'react';
import { Link } from 'react-router-dom';
import Transition from '../utils/Transition';
function ModalSearch({
id,
searchId,
modalOpen,
setModalOpen
}) {
const modalContent = useRef(null);
const searchInput = 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);
});
useEffect(() => {
modalOpen && searchInput.current.focus();
}, [modalOpen]);
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-start top-20 mb-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 overflow-auto max-w-2xl w-full max-h-full rounded shadow-lg">
{/* Search form */}
<form className="border-b border-slate-200">
<div className="relative">
<label htmlFor={searchId} className="sr-only">Search</label>
<input id={searchId} className="w-full border-0 focus:ring-transparent placeholder-slate-400 appearance-none py-3 pl-10 pr-4" type="search" placeholder="Search Anything…" ref={searchInput} />
<button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-4 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
<path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
</svg>
</button>
</div>
</form>
<div className="py-4 px-2">
{/* Recent searches */}
<div className="mb-3 last:mb-0">
<div className="text-xs font-semibold text-slate-400 uppercase px-2 mb-2">Recent searches</div>
<ul className="text-sm">
<li>
<Link
className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
to="#0"
onClick={() => setModalOpen(!modalOpen)}
>
<svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
</svg>
<span>Form Builder - 23 hours on-demand video</span>
</Link>
</li>
<li>
<Link
className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
to="#0"
onClick={() => setModalOpen(!modalOpen)}
>
<svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
</svg>
<span>Access Mosaic on mobile and TV</span>
</Link>
</li>
<li>
<Link
className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
to="#0"
onClick={() => setModalOpen(!modalOpen)}
>
<svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
</svg>
<span>Product Update - Q4 2021</span>
</Link>
</li>
<li>
<Link
className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
to="#0"
onClick={() => setModalOpen(!modalOpen)}
>
<svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
</svg>
<span>Master Digital Marketing Strategy course</span>
</Link>
</li>
<li>
<Link
className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
to="#0"
onClick={() => setModalOpen(!modalOpen)}
>
<svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
</svg>
<span>Dedicated forms for products</span>
</Link>
</li>
<li>
<Link
className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
to="#0"
onClick={() => setModalOpen(!modalOpen)}
>
<svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
<path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
</svg>
<span>Product Update - Q4 2021</span>
</Link>
</li>
</ul>
</div>
{/* Recent pages */}
<div className="mb-3 last:mb-0">
<div className="text-xs font-semibold text-slate-400 uppercase px-2 mb-2">Recent pages</div>
<ul className="text-sm">
<li>
<Link
className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
to="#0"
onClick={() => setModalOpen(!modalOpen)}
>
<svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
<path d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z" />
</svg>
<span><span className="font-medium text-slate-800 group-hover:text-white">Messages</span> - Conversation / … / Mike Mills</span>
</Link>
</li>
<li>
<Link
className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
to="#0"
onClick={() => setModalOpen(!modalOpen)}
>
<svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
<path d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z" />
</svg>
<span><span className="font-medium text-slate-800 group-hover:text-white">Messages</span> - Conversation / … / Eva Patrick</span>
</Link>
</li>
</ul>
</div>
</div>
</div>
</Transition>
</>
);
}
export default ModalSearch;

90
src/components/Tooltip.jsx
View File

@@ -1,90 +0,0 @@
import React, { useState } from 'react';
import Transition from '../utils/Transition';
function Tooltip({
children,
className,
bg,
size,
position,
}) {
const [tooltipOpen, setTooltipOpen] = useState(false);
const positionOuterClasses = (position) => {
switch (position) {
case 'right':
return 'left-full top-1/2 transform -translate-y-1/2';
case 'left':
return 'right-full top-1/2 transform -translate-y-1/2';
case 'bottom':
return 'top-full left-1/2 transform -translate-x-1/2';
default:
return 'bottom-full left-1/2 transform -translate-x-1/2';
}
}
const sizeClasses = (size) => {
switch (size) {
case 'lg':
return 'min-w-72 p-3';
case 'md':
return 'min-w-56 p-3';
case 'sm':
return 'min-w-44 p-2';
default:
return 'p-2';
}
};
const positionInnerClasses = (position) => {
switch (position) {
case 'right':
return 'ml-2';
case 'left':
return 'mr-2';
case 'bottom':
return 'mt-2';
default:
return 'mb-2';
}
};
return (
<div
className={`relative ${className}`}
onMouseEnter={() => setTooltipOpen(true)}
onMouseLeave={() => setTooltipOpen(false)}
onFocus={() => setTooltipOpen(true)}
onBlur={() => setTooltipOpen(false)}
>
<button
className="block"
aria-haspopup="true"
aria-expanded={tooltipOpen}
onClick={(e) => e.preventDefault()}
>
<svg className="w-4 h-4 fill-current text-slate-400" 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>
</button>
<div className={`z-10 absolute ${positionOuterClasses(position)}`}>
<Transition
show={tooltipOpen}
tag="div"
className={`rounded overflow-hidden ${bg === 'dark' ? 'bg-slate-800' : 'bg-white border border-slate-200 shadow-lg'} ${sizeClasses(size)} ${positionInnerClasses(position)}`}
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"
>
{children}
</Transition>
</div>
</div>
);
}
export default Tooltip;