clean up and bug fixes
This commit is contained in:
kandrusyak
@@ -1,92 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../partials/Sidebar';
|
||||
import Header from '../partials/Header';
|
||||
import Datepicker from '../components/Datepicker';
|
||||
import AnalyticsCard01 from '../partials/analytics/AnalyticsCard01';
|
||||
import AnalyticsCard02 from '../partials/analytics/AnalyticsCard02';
|
||||
import AnalyticsCard03 from '../partials/analytics/AnalyticsCard03';
|
||||
import AnalyticsCard04 from '../partials/analytics/AnalyticsCard04';
|
||||
import AnalyticsCard05 from '../partials/analytics/AnalyticsCard05';
|
||||
import AnalyticsCard06 from '../partials/analytics/AnalyticsCard06';
|
||||
import AnalyticsCard07 from '../partials/analytics/AnalyticsCard07';
|
||||
import AnalyticsCard08 from '../partials/analytics/AnalyticsCard08';
|
||||
import AnalyticsCard09 from '../partials/analytics/AnalyticsCard09';
|
||||
import AnalyticsCard10 from '../partials/analytics/AnalyticsCard10';
|
||||
import AnalyticsCard11 from '../partials/analytics/AnalyticsCard11';
|
||||
|
||||
function Analytics() {
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Page header */}
|
||||
<div className="sm:flex sm:justify-between sm:items-center mb-8">
|
||||
|
||||
{/* Left: Title */}
|
||||
<div className="mb-4 sm:mb-0">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Analytics ✨</h1>
|
||||
</div>
|
||||
|
||||
{/* Right: Actions */}
|
||||
<div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
|
||||
|
||||
{/* Datepicker built with flatpickr */}
|
||||
<Datepicker align="right" />
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Cards */}
|
||||
<div className="grid grid-cols-12 gap-6">
|
||||
|
||||
{/* Line chart (Analytics) */}
|
||||
<AnalyticsCard01 />
|
||||
{/* Line chart (Active Users Right Now) */}
|
||||
<AnalyticsCard02 />
|
||||
{/* Stacked bar chart (Acquisition Channels) */}
|
||||
<AnalyticsCard03 />
|
||||
{/* Horizontal bar chart (Audience Overview) */}
|
||||
<AnalyticsCard04 />
|
||||
{/* Report card (Top Channels) */}
|
||||
<AnalyticsCard05 />
|
||||
{/* Report card (Top Pages) */}
|
||||
<AnalyticsCard06 />
|
||||
{/* Report card (Top Countries) */}
|
||||
<AnalyticsCard07 />
|
||||
{/* Doughnut chart (Sessions By Device) */}
|
||||
<AnalyticsCard08 />
|
||||
{/* Doughnut chart (Visit By Age Category) */}
|
||||
<AnalyticsCard09 />
|
||||
{/* Polar chart (Sessions By Gender) */}
|
||||
<AnalyticsCard10 />
|
||||
{/* Table (Top Products) */}
|
||||
<AnalyticsCard11 />
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Analytics;
|
||||
@@ -1,102 +0,0 @@
|
||||
import React, {useState} from 'react';
|
||||
|
||||
import Sidebar from '../partials/Sidebar';
|
||||
import Header from '../partials/Header';
|
||||
import WelcomeBanner from '../partials/dashboard/WelcomeBanner';
|
||||
import DashboardAvatars from '../partials/dashboard/DashboardAvatars';
|
||||
import FilterButton from '../components/DropdownFilter';
|
||||
import Datepicker from '../components/Datepicker';
|
||||
import DashboardCard01 from '../partials/dashboard/DashboardCard01';
|
||||
import DashboardCard02 from '../partials/dashboard/DashboardCard02';
|
||||
import DashboardCard03 from '../partials/dashboard/DashboardCard03';
|
||||
import DashboardCard04 from '../partials/dashboard/DashboardCard04';
|
||||
import DashboardCard05 from '../partials/dashboard/DashboardCard05';
|
||||
import DashboardCard06 from '../partials/dashboard/DashboardCard06';
|
||||
import DashboardCard07 from '../partials/dashboard/DashboardCard07';
|
||||
import DashboardCard08 from '../partials/dashboard/DashboardCard08';
|
||||
import DashboardCard09 from '../partials/dashboard/DashboardCard09';
|
||||
import DashboardCard10 from '../partials/dashboard/DashboardCard10';
|
||||
import DashboardCard11 from '../partials/dashboard/DashboardCard11';
|
||||
|
||||
function Dashboard() {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Welcome banner */}
|
||||
<WelcomeBanner />
|
||||
|
||||
{/* Dashboard actions */}
|
||||
<div className="sm:flex sm:justify-between sm:items-center mb-8">
|
||||
|
||||
{/* Left: Avatars */}
|
||||
<DashboardAvatars />
|
||||
|
||||
{/* Right: Actions */}
|
||||
<div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
|
||||
{/* Filter button */}
|
||||
<FilterButton align="right" />
|
||||
{/* Datepicker built with flatpickr */}
|
||||
<Datepicker align="right" />
|
||||
{/* Add view button */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
|
||||
<svg className="w-4 h-4 fill-current opacity-50 shrink-0" viewBox="0 0 16 16">
|
||||
<path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
|
||||
</svg>
|
||||
<span className="hidden xs:block ml-2">Add View</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Cards */}
|
||||
<div className="grid grid-cols-12 gap-6">
|
||||
|
||||
{/* Line chart (Acme Plus) */}
|
||||
<DashboardCard01 />
|
||||
{/* Line chart (Acme Advanced) */}
|
||||
<DashboardCard02 />
|
||||
{/* Line chart (Acme Professional) */}
|
||||
<DashboardCard03 />
|
||||
{/* Bar chart (Direct vs Indirect) */}
|
||||
<DashboardCard04 />
|
||||
{/* Line chart (Real Time Value) */}
|
||||
<DashboardCard05 />
|
||||
{/* Doughnut chart (Top Countries) */}
|
||||
<DashboardCard06 />
|
||||
{/* Table (Top Channels) */}
|
||||
<DashboardCard07 />
|
||||
{/* Line chart (Sales Over Time) */}
|
||||
<DashboardCard08 />
|
||||
{/* Stacked bar chart (Sales VS Refunds) */}
|
||||
<DashboardCard09 />
|
||||
{/* Card (Recent Activity) */}
|
||||
<DashboardCard10 />
|
||||
{/* Card (Income/Expenses) */}
|
||||
<DashboardCard11 />
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Dashboard;
|
||||
@@ -1,104 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../partials/Sidebar';
|
||||
import Header from '../partials/Header';
|
||||
import Datepicker from '../components/Datepicker';
|
||||
import FintechIntro from '../partials/fintech/FintechIntro';
|
||||
import FintechCard01 from '../partials/fintech/FintechCard01';
|
||||
import FintechCard02 from '../partials/fintech/FintechCard02';
|
||||
import FintechCard03 from '../partials/fintech/FintechCard03';
|
||||
import FintechCard04 from '../partials/fintech/FintechCard04';
|
||||
import FintechCard05 from '../partials/fintech/FintechCard05';
|
||||
import FintechCard06 from '../partials/fintech/FintechCard06';
|
||||
import FintechCard07 from '../partials/fintech/FintechCard07';
|
||||
import FintechCard08 from '../partials/fintech/FintechCard08';
|
||||
import FintechCard09 from '../partials/fintech/FintechCard09';
|
||||
import FintechCard10 from '../partials/fintech/FintechCard10';
|
||||
import FintechCard11 from '../partials/fintech/FintechCard11';
|
||||
import FintechCard12 from '../partials/fintech/FintechCard12';
|
||||
import FintechCard13 from '../partials/fintech/FintechCard13';
|
||||
import FintechCard14 from '../partials/fintech/FintechCard14';
|
||||
|
||||
function Fintech() {
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className='flex h-screen overflow-hidden'>
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className='relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden'>
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className='px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto'>
|
||||
|
||||
{/* Page header */}
|
||||
<div className='sm:flex sm:justify-between sm:items-center mb-5'>
|
||||
|
||||
{/* Left: Title */}
|
||||
<div className='mb-4 sm:mb-0'>
|
||||
<h1 className='text-2xl md:text-3xl text-slate-800 font-bold'>Fintech ✨</h1>
|
||||
</div>
|
||||
|
||||
{/* Right: Actions */}
|
||||
<div className='grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2'>
|
||||
|
||||
{/* Datepicker built with flatpickr */}
|
||||
<Datepicker align='right' />
|
||||
|
||||
{/* Add account button */}
|
||||
<button className='btn bg-indigo-500 hover:bg-indigo-600 text-white'>
|
||||
<svg className='w-4 h-4 fill-current opacity-50 shrink-0' viewBox='0 0 16 16'>
|
||||
<path d='M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z' />
|
||||
</svg>
|
||||
<span className='hidden xs:block ml-2'>Add Account</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Cards */}
|
||||
<div className='grid grid-cols-12 gap-6'>
|
||||
|
||||
{/* Page Intro */}
|
||||
<FintechIntro />
|
||||
{/* Line chart (Portfolio Returns) */}
|
||||
<FintechCard01 />
|
||||
{/* Credit Card */}
|
||||
<FintechCard02 />
|
||||
{/* Bar chart (Cash Flow) */}
|
||||
<FintechCard03 />
|
||||
{/* Horizontal bar chart (Cash Flow by Account) */}
|
||||
<FintechCard04 />
|
||||
{/* Table (Recent Expenses) */}
|
||||
<FintechCard05 />
|
||||
{/* Table (Recent Earnings) */}
|
||||
<FintechCard06 />
|
||||
{/* Line chart (Saving Goals) */}
|
||||
<FintechCard07 />
|
||||
{/* Line chart (Growth Portfolio) */}
|
||||
<FintechCard08 />
|
||||
{/* Pie chart (Portfolio Value) */}
|
||||
<FintechCard09 />
|
||||
{/* Line charts (Stock graphs) */}
|
||||
<FintechCard10 />
|
||||
<FintechCard11 />
|
||||
<FintechCard12 />
|
||||
<FintechCard13 />
|
||||
{/* Table (Market Trends) */}
|
||||
<FintechCard14 />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Fintech;
|
||||
@@ -1,55 +0,0 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
|
||||
import Sidebar from '../partials/Sidebar';
|
||||
import Header from '../partials/Header';
|
||||
import MessagesSidebar from '../partials/messages/MessagesSidebar';
|
||||
import MessagesHeader from '../partials/messages/MessagesHeader';
|
||||
import MessagesBody from '../partials/messages/MessagesBody';
|
||||
import MessagesFooter from '../partials/messages/MessagesFooter';
|
||||
|
||||
function Messages() {
|
||||
|
||||
const contentArea = useRef(null)
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const [msgSidebarOpen, setMsgSidebarOpen] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
contentArea.current.scrollTop = 99999999
|
||||
}, [msgSidebarOpen]); // automatically scroll the chat and make the most recent message visible
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden" ref={contentArea}>
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="relative flex">
|
||||
|
||||
{/* Messages sidebar */}
|
||||
<MessagesSidebar msgSidebarOpen={msgSidebarOpen} setMsgSidebarOpen={setMsgSidebarOpen} />
|
||||
|
||||
{/* Messages body */}
|
||||
<div className={`grow flex flex-col md:translate-x-0 transform transition-transform duration-300 ease-in-out ${msgSidebarOpen ? 'translate-x-1/3' : 'translate-x-0'}`}>
|
||||
<MessagesHeader msgSidebarOpen={msgSidebarOpen} setMsgSidebarOpen={setMsgSidebarOpen} />
|
||||
<MessagesBody />
|
||||
<MessagesFooter />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Messages;
|
||||
@@ -1,151 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
import AccordionBasic from '../../components/AccordionBasic';
|
||||
import AccordionTableItem from '../../components/AccordionTableItem';
|
||||
import AccordionTableRichItem from '../../components/AccordionTableRichItem';
|
||||
|
||||
import Image01 from '../../images/user-40-07.jpg';
|
||||
|
||||
function AccordionPage() {
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
const items = [
|
||||
{
|
||||
id: '0',
|
||||
image: Image01,
|
||||
customer: 'Mark Cameron',
|
||||
total: '$129.00',
|
||||
status: 'Refunded',
|
||||
items: '1',
|
||||
location: '🇲🇽 New Mexico, MX',
|
||||
type: 'Subscription',
|
||||
description: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
|
||||
},
|
||||
];
|
||||
|
||||
const items2 = [
|
||||
{
|
||||
id: '0',
|
||||
image: Image01,
|
||||
customer: 'Mark Cameron',
|
||||
email: 'mark.cameron@app.com',
|
||||
location: '🇬🇧 London, UK',
|
||||
date: '22/01/2021',
|
||||
amount: '+249.88',
|
||||
descriptionTitle: 'Excepteur sint occaecat cupidatat.',
|
||||
descriptionBody: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Page header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Accordion ✨</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-200">
|
||||
|
||||
{/* Components */}
|
||||
<div className="space-y-8 mt-8">
|
||||
|
||||
{/* Basic Accordion */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Basic Accordion</h2>
|
||||
<AccordionBasic title="Accordion Title">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</AccordionBasic>
|
||||
</div>
|
||||
|
||||
{/* Table Row with Accordion */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Table Row with Accordion</h2>
|
||||
{/* Start */}
|
||||
<div className="rounded-sm border border-slate-200">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table-auto w-full divide-y divide-slate-200">
|
||||
{
|
||||
items.map(item => {
|
||||
return (
|
||||
<AccordionTableItem
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
image={item.image}
|
||||
customer={item.customer}
|
||||
total={item.total}
|
||||
status={item.status}
|
||||
items={item.items}
|
||||
location={item.location}
|
||||
type={item.type}
|
||||
description={item.description}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
{/* Rich Table Row with Accordion */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Rich Table Row with Accordion</h2>
|
||||
{/* Start */}
|
||||
<div className="rounded-sm border border-slate-200">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table-auto w-full divide-y divide-slate-200">
|
||||
{
|
||||
items2.map(item => {
|
||||
return (
|
||||
<AccordionTableRichItem
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
image={item.image}
|
||||
customer={item.customer}
|
||||
email={item.email}
|
||||
location={item.location}
|
||||
date={item.date}
|
||||
amount={item.amount}
|
||||
descriptionTitle={item.descriptionTitle}
|
||||
descriptionBody={item.descriptionBody}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AccordionPage;
|
||||
@@ -1,186 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
|
||||
function BadgePage() {
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Page header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Badge ✨</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-200">
|
||||
|
||||
{/* Components */}
|
||||
<div className="space-y-8 mt-8">
|
||||
|
||||
{/* Basic Small */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Basic Small</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">Working on</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-xs inline-flex font-medium bg-sky-100 text-sky-600 rounded-full text-center px-2.5 py-1">Exciting news</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">Product</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-xs inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">Announcement</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-xs inline-flex font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">Bug Fix</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-xs inline-flex font-medium bg-blue-100 text-blue-600 rounded-full text-center px-2.5 py-1">Customer Stories</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-xs inline-flex font-medium bg-slate-100 text-slate-500 rounded-full text-center px-2.5 py-1">All Stories</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-xs inline-flex font-medium bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">All Stories</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Basic Large */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Basic Large</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-sm inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">Working on</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-sm inline-flex font-medium bg-sky-100 text-sky-600 rounded-full text-center px-2.5 py-1">Exciting news</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-sm inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">Product</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-sm inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">Announcement</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-sm inline-flex font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">Bug Fix</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-sm inline-flex font-medium bg-blue-100 text-blue-600 rounded-full text-center px-2.5 py-1">Customer Stories</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-sm inline-flex font-medium bg-slate-100 text-slate-500 rounded-full text-center px-2.5 py-1">All Stories</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-sm inline-flex font-medium bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">All Stories</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Basic with Icon */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Basic with Icon</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="inline-flex items-center text-xs font-medium text-slate-100 bg-slate-700 rounded-full text-center px-2 py-0.5">
|
||||
<svg className="w-3 h-3 shrink-0 fill-current text-amber-500 mr-1" viewBox="0 0 12 12">
|
||||
<path d="M11.953 4.29a.5.5 0 00-.454-.292H6.14L6.984.62A.5.5 0 006.12.173l-6 7a.5.5 0 00.379.825h5.359l-.844 3.38a.5.5 0 00.864.445l6-7a.5.5 0 00.075-.534z" />
|
||||
</svg>
|
||||
<span>Special Offer</span>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="inline-flex items-center text-sm font-medium text-slate-100 bg-slate-700 rounded-full text-center px-2 py-0.5">
|
||||
<svg className="w-3 h-3 shrink-0 fill-current text-amber-500 mr-1" viewBox="0 0 12 12">
|
||||
<path d="M11.953 4.29a.5.5 0 00-.454-.292H6.14L6.984.62A.5.5 0 006.12.173l-6 7a.5.5 0 00.379.825h5.359l-.844 3.38a.5.5 0 00.864.445l6-7a.5.5 0 00.075-.534z" />
|
||||
</svg>
|
||||
<span>Special Offer</span>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Basic for Charts */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Basic for Charts</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+29%</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-14%</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BadgePage;
|
||||
@@ -1,235 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
|
||||
function ButtonPage() {
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Page header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Button ✨</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-200">
|
||||
|
||||
{/* Components */}
|
||||
<div className="space-y-8 mt-8">
|
||||
|
||||
{/* Appearances */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Appearances</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">Primary</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn border-slate-200 hover:border-slate-300 text-indigo-500">Secondary</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn border-slate-200 hover:border-slate-300 text-slate-600">Tertiary</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-rose-500 hover:bg-rose-600 text-white">Danger</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn border-slate-200 hover:border-slate-300 text-rose-500">Danger</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-emerald-500 hover:bg-emerald-600 text-white">Success</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn border-slate-200 hover:border-slate-300 text-emerald-500">Success</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* States */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">States</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed shadow-none" disabled>Disabled</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed shadow-none" disabled>
|
||||
<svg className="animate-spin w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
|
||||
<path d="M8 16a7.928 7.928 0 01-3.428-.77l.857-1.807A6.006 6.006 0 0014 8c0-3.309-2.691-6-6-6a6.006 6.006 0 00-5.422 8.572l-1.806.859A7.929 7.929 0 010 8c0-4.411 3.589-8 8-8s8 3.589 8 8-3.589 8-8 8z" />
|
||||
</svg>
|
||||
<span className="ml-2">Loading</span>
|
||||
</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sizes */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Sizes</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn-xs bg-indigo-500 hover:bg-indigo-600 text-white">Button</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">Button</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">Button</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn-lg bg-indigo-500 hover:bg-indigo-600 text-white">Button</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons with an Icon */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Buttons with an Icon</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
|
||||
<svg className="w-4 h-4 fill-current opacity-50 shrink-0" viewBox="0 0 16 16">
|
||||
<path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
|
||||
</svg>
|
||||
<span className="ml-2">Add Event</span>
|
||||
</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn border-slate-200 hover:border-slate-300 text-slate-600">
|
||||
<svg className="w-4 h-4 fill-current text-slate-500 shrink-0" viewBox="0 0 16 16">
|
||||
<path d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z" />
|
||||
</svg>
|
||||
<span className="ml-2">Edit Content</span>
|
||||
</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn border-slate-200 hover:border-slate-300 text-rose-500">
|
||||
<svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
|
||||
<path d="M5 7h2v6H5V7zm4 0h2v6H9V7zm3-6v2h4v2h-1v10c0 .6-.4 1-1 1H2c-.6 0-1-.4-1-1V5H0V3h4V1c0-.6.4-1 1-1h6c.6 0 1 .4 1 1zM6 2v1h4V2H6zm7 3H3v9h10V5z" />
|
||||
</svg>
|
||||
<span className="ml-2">Delete</span>
|
||||
</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Icon Buttons */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Icon Buttons</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn border-slate-200 hover:border-slate-300">
|
||||
<svg className="w-4 h-4 fill-current text-slate-500 shrink-0" viewBox="0 0 16 16">
|
||||
<path d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z" />
|
||||
</svg>
|
||||
</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn border-slate-200 hover:border-slate-300">
|
||||
<svg className="w-4 h-4 fill-current text-rose-500 shrink-0" viewBox="0 0 16 16">
|
||||
<path d="M5 7h2v6H5V7zm4 0h2v6H9V7zm3-6v2h4v2h-1v10c0 .6-.4 1-1 1H2c-.6 0-1-.4-1-1V5H0V3h4V1c0-.6.4-1 1-1h6c.6 0 1 .4 1 1zM6 2v1h4V2H6zm7 3H3v9h10V5z" />
|
||||
</svg>
|
||||
</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn border-slate-200 hover:border-slate-300">
|
||||
<svg className="w-4 h-4 fill-current text-indigo-500 shrink-0" viewBox="0 0 16 16">
|
||||
<path d="M14.3 2.3L5 11.6 1.7 8.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l4 4c.2.2.4.3.7.3.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Button Groups */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Button Groups</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="flex flex-wrap -space-x-px">
|
||||
<button className="btn bg-indigo-600 text-white rounded-none border-l-indigo-400 first:rounded-l last:rounded-r first:border-r-transparent">Weekly</button>
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-indigo-100 rounded-none border-l-indigo-400 first:rounded-l last:rounded-r first:border-r-transparent">Monthly</button>
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-indigo-100 rounded-none border-l-indigo-400 first:rounded-l last:rounded-r first:border-r-transparent">Yearly</button>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="flex flex-wrap -space-x-px">
|
||||
<button className="btn bg-slate-50 border-slate-200 hover:bg-slate-50 text-indigo-500 rounded-none first:rounded-l last:rounded-r">Weekly</button>
|
||||
<button className="btn bg-white border-slate-200 hover:bg-slate-50 text-slate-600 rounded-none first:rounded-l last:rounded-r">Monthly</button>
|
||||
<button className="btn bg-white border-slate-200 hover:bg-slate-50 text-slate-600 rounded-none first:rounded-l last:rounded-r">Yearly</button>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ButtonPage;
|
||||
@@ -5,6 +5,7 @@ import { observer } from 'mobx-react-lite';
|
||||
import Header from '../../partials/Header';
|
||||
import ProfileTable from '../../partials/profile/ProfileTable';
|
||||
import Image from '../../images/transactions-image-04.svg';
|
||||
import {labelMap} from '../../shared/labelMap';
|
||||
|
||||
const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc ID', 'National doc issue date', 'National doc expiry date'];
|
||||
|
||||
@@ -19,7 +20,7 @@ const Profile = observer (() => {
|
||||
const [buttonPanelOpen, setButtonPanelOpen] = useState(true);
|
||||
const [removePanelOpen, setRemovePanelOpen] = useState(false);
|
||||
const [changePanelOpen, setChangePanelOpen] = useState(false);
|
||||
const [toggle, setToggle] = useState(true);
|
||||
const [storeOnBlockchain, setStoreOnBlockchain] = useState(false);
|
||||
const [addPanelOpen, setAddPanelOpen] = useState(false);
|
||||
const [updatePanelOpen, setUpdatePanelOpen] = useState(false);
|
||||
const [selectedItems, setSelectedItems] = useState([]);
|
||||
@@ -27,6 +28,7 @@ const Profile = observer (() => {
|
||||
const [updatedValues, setUpdatedValues] = useState([defaultValues]);
|
||||
const [addedValues, setAddedValues] = useState(defaultValues);
|
||||
const [isCheck, setIsCheck] = useState([]);
|
||||
const [alreadyExists, setAlreadyExists] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
handleSelectedItems(isCheck);
|
||||
@@ -107,7 +109,8 @@ const Profile = observer (() => {
|
||||
|
||||
const sendAddedData = () => {
|
||||
const checkingAddedData = !store.decryptedAccountData
|
||||
.some((element) => element.label === addedValues.label) && (addedValues.seed.length === 20);
|
||||
.some((element) => element.label === addedValues.label)
|
||||
setAlreadyExists(!checkingAddedData);
|
||||
if (checkingAddedData) {
|
||||
setAddPanelOpen(false);
|
||||
setButtonPanelOpen(true);
|
||||
@@ -153,7 +156,11 @@ const Profile = observer (() => {
|
||||
};
|
||||
|
||||
const addDataParameters = () => {
|
||||
addedValues.key = addedValues.label.toLowerCase().split(' ').join('');
|
||||
const label = addedValues.label.toLowerCase().split(' ').join('');
|
||||
if(labelMap[label])
|
||||
addedValues.key = addedValues.label.toLowerCase().split(' ').join('');
|
||||
else
|
||||
addedValues.key = addedValues.label
|
||||
store.pushAccountData(store.decryptedAccountData.concat(addedValues));
|
||||
};
|
||||
|
||||
@@ -234,7 +241,7 @@ const Profile = observer (() => {
|
||||
</ul>
|
||||
</div>
|
||||
{/* Table */}
|
||||
<div className='w-[828px]'>
|
||||
<div>
|
||||
<ProfileTable isCheck={isCheck} handleClick={handleClick} userData={store.decryptedAccountData}/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -262,7 +269,7 @@ const Profile = observer (() => {
|
||||
<input
|
||||
autoComplete='off'
|
||||
id="label"
|
||||
className="form-input w-full"
|
||||
className={`form-input w-full ${alreadyExists && 'border-rose-300'}`}
|
||||
type="text"
|
||||
required
|
||||
onInput={(e) => handleInput(e.target.value, 'label')}
|
||||
@@ -277,6 +284,7 @@ const Profile = observer (() => {
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{ alreadyExists && <div className="text-xs mt-1 text-rose-500">This property already added!</div> }
|
||||
</div>
|
||||
<div className='my-3 z-10'>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
|
||||
@@ -308,7 +316,7 @@ const Profile = observer (() => {
|
||||
<span className="block text-sm font-medium">Store data on blockchain</span>
|
||||
<div className="flex items-center">
|
||||
<div className="form-switch">
|
||||
<input type="checkbox" id="blockcheined" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
|
||||
<input type="checkbox" id="blockcheined" className="sr-only" checked={storeOnBlockchain} onChange={() => setStoreOnBlockchain(!storeOnBlockchain)} />
|
||||
<label className="bg-slate-400" htmlFor="switch-1">
|
||||
<span className="bg-white shadow-sm" aria-hidden="true"></span>
|
||||
</label>
|
||||
@@ -321,7 +329,7 @@ const Profile = observer (() => {
|
||||
className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
|
||||
onClick={cancelAddPanel}
|
||||
>
|
||||
Cansel
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
|
||||
@@ -380,7 +388,7 @@ const Profile = observer (() => {
|
||||
<span className="block text-sm font-medium">Store data on blockchain</span>
|
||||
<div className="flex items-center">
|
||||
<div className="form-switch">
|
||||
<input type="checkbox" id="blockcheined" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
|
||||
<input type="checkbox" id="blockcheined" className="sr-only" checked={storeOnBlockchain} onChange={() => setStoreOnBlockchain(!storeOnBlockchain)} />
|
||||
<label className="bg-slate-400" htmlFor="switch-1">
|
||||
<span className="bg-white shadow-sm" aria-hidden="true"></span>
|
||||
</label>
|
||||
@@ -393,7 +401,7 @@ const Profile = observer (() => {
|
||||
className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
|
||||
onClick={cancelUpdatePanel}
|
||||
>
|
||||
Cansel
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
|
||||
@@ -415,7 +423,7 @@ const Profile = observer (() => {
|
||||
<span className="block text-sm font-medium">On blockchain too</span>
|
||||
<div className="flex items-center">
|
||||
<div className="form-switch">
|
||||
<input type="checkbox" id="switch-1" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
|
||||
<input type="checkbox" id="switch-1" className="sr-only" checked={storeOnBlockchain} onChange={() => setStoreOnBlockchain(!storeOnBlockchain)} />
|
||||
<label className="bg-slate-400" htmlFor="switch-1">
|
||||
<span className="bg-white shadow-sm" aria-hidden="true"></span>
|
||||
</label>
|
||||
@@ -438,7 +446,7 @@ const Profile = observer (() => {
|
||||
</div>
|
||||
</div>
|
||||
{/* Details */}
|
||||
<div className={`${(removePanelOpen || addPanelOpen) || 'hidden'} drop-shadow-lg`}>
|
||||
<div className={`${(!(removePanelOpen || addPanelOpen) || !storeOnBlockchain) && 'hidden'} drop-shadow-lg`}>
|
||||
{/* Top */}
|
||||
<div className="bg-white rounded-t-xl px-5 pb-4 text-center">
|
||||
<div className="mb-3 text-center">
|
||||
|
||||
Reference in New Issue
Block a user