The designing component is a trouble for you? Try to use PrimeReact.
PrimeReact is a rich set of open-source native components for React. You can easy to view components on the website, then copy and paste them to your site.
ENV
# Create React Project
npx create-react-app <app-name> --template typescript
# Install React
cd <app-name>
npm i react
npm i ts-node typescript @types/node sassPrimeReact: primeface.org/primereact
Install PrimeReact
npm i primereact primeicons primeflexAdd Base CSS to index.tsx
import 'primereact/resources/themes/saga-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import 'primeflex/primeflex.css';Page Heading
Create a Component file: page-heading.tsx
import { Button } from 'primereact/button';
const PageHeading = () => {
return (
<div className="surface-0">
<ul className="list-none p-0 m-0 flex align-items-center font-medium mb-3">
<li>
<a className="text-500 no-underline line-height-3 cursor-pointer">Application</a>
</li>
<li className="px-2">
<i className="pi pi-angle-right text-500 line-height-3"></i>
</li>
<li>
<span className="text-900 line-height-3">Analytics</span>
</li>
</ul>
<div className="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
<div>
<div className="font-medium text-3xl text-900">Customers</div>
<div className="flex align-items-center text-700 flex-wrap">
<div className="mr-5 flex align-items-center mt-3">
<i className="pi pi-users mr-2"></i>
<span>332 Active Users</span>
</div>
<div className="mr-5 flex align-items-center mt-3">
<i className="pi pi-globe mr-2"></i>
<span>9402 Sessions</span>
</div>
<div className="flex align-items-center mt-3">
<i className="pi pi-clock mr-2"></i>
<span>2.32m Avg. Duration</span>
</div>
</div>
</div>
<div className="mt-3 lg:mt-0">
<Button label="Add" className="p-button-outlined mr-2" icon="pi pi-user-plus" />
<Button label="Save" icon="pi pi-check" />
</div>
</div>
</div>
);
}
export default PageHeading;Insert components to index.tsx
import PageHeading from '../page-heading'
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
//
root.render(
<React.StrictMode>
...
<PageHeading />
</React.StrictMode>
);Header
Create a Component file: header.tsx
import React from 'react';
import { Menubar } from 'primereact/menubar';
import { InputText } from 'primereact/inputtext';
const MainHeader = () => {
const items = [
{
label: 'File',
icon: 'pi pi-fw pi-file',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon: 'pi pi-fw pi-video'
},
]
},
{
label: 'Delete',
icon: 'pi pi-fw pi-trash'
},
{
separator: true
},
{
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Left',
icon: 'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
},
]
},
{
label: 'Users',
icon: 'pi pi-fw pi-user',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-user-plus',
},
{
label: 'Delete',
icon: 'pi pi-fw pi-user-minus',
},
{
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon: 'pi pi-fw pi-print'
}
]
},
{
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
label: 'Quit',
icon: 'pi pi-fw pi-power-off'
}
];
const start = <img alt="logo" src="showcase/images/logo.png" onError={
(e) => e.currentTarget.src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png"
} height="40" className="mr-2"></img>;
const end = <InputText placeholder="Search" type="text" />;
return (
<div>
<div className="card">
<Menubar model={items} start={start} end={end} />
</div>
</div>
);
}
export default MainHeader;Insert components to index.tsx
import MainHeader from './header'
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
//
root.render(
<React.StrictMode>
...
<MainHeader />
</React.StrictMode>
);
