add data dashboard templates

components/kit/components/elements/index.tsx

@@ -35,6 +35,7 @@ const Elements: FC = () => {
         },
         {
             title: 'Dashboards',
+            isNew: true,
             items: 26,
             img: 'images/sections/data.png',
             link: '/components/data',

components/kit/templates/dashboardPages/projectDashboard/KpitDashboard.tsx → components/kit/templates/dashboardPages/dataDashboard/KpitDashboard.tsx

@@ -471,7 +471,7 @@ const KpiProject = () => {
                                         Sign in
                                     </p>
                                     <div className="flex items-end space-x-2 my-6">
-                                        <p className="text-5xl text-black dark:text-white font-bold">12</p>
+                                        <p className="text-5xl text-black dark:text-white font-bold">16</p>
                                         <span className="text-red-500 text-xl font-bold flex items-center">
                                             <svg
                                                 width="20"
@@ -553,7 +553,7 @@ const KpiProject = () => {
                                         Sales
                                     </p>
                                     <div className="flex items-end space-x-2 my-6">
-                                        <p className="text-5xl text-black dark:text-white font-bold">12</p>
+                                        <p className="text-5xl text-black dark:text-white font-bold">9</p>
                                         <span className="text-green-500 text-xl font-bold flex items-center">
                                             <svg
                                                 width="20"
@@ -635,7 +635,7 @@ const KpiProject = () => {
                                         Maintenance
                                     </p>
                                     <div className="flex items-end space-x-2 my-6">
-                                        <p className="text-5xl text-black dark:text-white font-bold">12</p>
+                                        <p className="text-5xl text-black dark:text-white font-bold">15</p>
                                         <span className="text-green-500 text-xl font-bold flex items-center">
                                             <svg
                                                 width="20"

components/kit/templates/dashboardPages/index.tsx

@@ -9,9 +9,24 @@ const DashboardPages = () => {
             img: 'images/sections/dashboard.png',
             link: '/templates/dashboard',
         },
+        {
+            title: 'Datas',
+            isNew: true,
+            items: 1,
+            img: 'images/sections/datadashboard.png',
+            link: '/templates/datadashboard',
+        },
     ];
 
-    return <SectionDesc hasCommingSoon={true} id="dashboard" items={dashboardSections} title="Dashboard" />;
+    return (
+        <SectionDesc
+            isTemplate={true}
+            hasCommingSoon={true}
+            id="dashboard"
+            items={dashboardSections}
+            title="Dashboards"
+        />
+    );
 };
 
 export default DashboardPages;

components/kit/templates/errorsPages/index.tsx

@@ -11,7 +11,7 @@ const ErrorPages = () => {
         },
     ];
 
-    return <SectionDesc hasCommingSoon={true} id="home" items={homeSection} title="Errors pages" />;
+    return <SectionDesc isTemplate={true} hasCommingSoon={true} id="home" items={homeSection} title="Errors pages" />;
 };
 
 export default ErrorPages;

components/kit/templates/homePages/index.tsx

@@ -23,7 +23,9 @@ const HomePage = () => {
         },
     ];
 
-    return <SectionDesc hasCommingSoon={true} id="home" items={homeSection} title="Landing page" />;
+    return (
+        <SectionDesc isTemplate={true} hasCommingSoon={true} id="errors" items={homeSection} title="Landing pages" />
+    );
 };
 
 export default HomePage;

components/layout/ComponentLayout.tsx

@@ -7,7 +7,6 @@ import EDITOR_THEME from '../../editorTheme';
 import Link from 'next/link';
 import ReactDOMServer from 'react-dom/server';
 import Toggle from '../kit/components/form/toggle/Toggle';
-import Badge from '../kit/components/elements/badges/Badge';
 import { formatHtml } from '../../utils/Utils';
 
 interface Props {
@@ -20,7 +19,6 @@ interface Props {
     vertical?: boolean;
     containerClasses?: string;
     fullscreen?: boolean;
-    isNew?: boolean;
 }
 
 enum STATUS {
@@ -101,21 +99,7 @@ const ComponentLayout = (props: Props) => {
             key={props.title}
         >
             <div className="flex flex-col md:flex-row items-center justify-between bg-white p-4 border rounded-xl">
-                <p className="text-xl font-light text-gray-600 mb-2 md:mb-0">
-                    {props.title}{' '}
-                    {props.isNew ? (
-                        <Badge
-                            color="bg-green-300"
-                            textColor="text-white"
-                            rounded="rounded"
-                            label="New"
-                            isSmall={true}
-                            isMediumWeight={true}
-                        />
-                    ) : (
-                        ''
-                    )}
-                </p>
+                <p className="text-xl font-light text-gray-600 mb-2 md:mb-0">{props.title} </p>
                 <div className="flex items-center flex-row flex-wrap gap-4 justify-center">
                     {props.showSwitchMode && <Toggle label="Dark mode" onChange={(mode) => changeMode(mode)} />}
 

components/site/section/SectionDesc.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import Link from 'next/link';
+import Badge from '../../kit/components/elements/badges/Badge';
 
 interface Props {
     items: section[];
     title: string;
     id: string;
+    isTemplate?: boolean;
     hasCommingSoon?: boolean;
 }
 
@@ -13,9 +15,10 @@ interface section {
     items: number;
     img: string;
     link: string;
+    isNew?: boolean;
 }
 
-const SectionDesc = ({ title, items, id, hasCommingSoon }: Props) => {
+const SectionDesc = ({ title, items, id, hasCommingSoon, isTemplate }: Props) => {
     return (
         <div className="mb-8" id={id}>
             <h1 className="w-full text-left text-2xl font-light mb-4 text-gray-600">{title}</h1>
@@ -25,10 +28,22 @@ const SectionDesc = ({ title, items, id, hasCommingSoon }: Props) => {
                     return (
                         <div
                             key={section.title}
-                            className="hover:opacity-100 border rounded-lg w-full sm:w-1/3 m-2 md:m-0  md:w-1/5"
+                            className="border rounded-lg relative w-full sm:w-1/3 m-2 md:m-0  md:w-1/5"
                         >
+                            {section.isNew && (
+                                <div className="absolute z-20 top-4 right-4">
+                                    <Badge
+                                        color="bg-green-500"
+                                        textColor="text-white"
+                                        rounded="rounded"
+                                        label="New items"
+                                        isSmall={true}
+                                        isMediumWeight={true}
+                                    />
+                                </div>
+                            )}
                             <Link href={section.link}>
-                                <a className="">
+                                <a className="hover:opacity-100">
                                     <img
                                         src={section.img}
                                         alt={section.title}
@@ -37,7 +52,7 @@ const SectionDesc = ({ title, items, id, hasCommingSoon }: Props) => {
                                     <p className="text-gray-700 text-md p-2">
                                         {section.title}{' '}
                                         <span className="text-gray-500 font-thin text-sm">
-                                            ({section.items} components)
+                                            ({section.items} {isTemplate ? 'templates' : 'components'})
                                         </span>
                                     </p>
                                 </a>
@@ -53,7 +68,7 @@ const SectionDesc = ({ title, items, id, hasCommingSoon }: Props) => {
                                 alt="coming soon"
                                 className="rounded-lg w-full object-cover w-60 md:h-36 opacity-90 hover:opacity-100"
                             />
-                            <p className="text-gray-700 text-sm p-2">More templates will coming soon...</p>
+                            <p className="text-gray-700 text-sm p-2">More items will coming soon...</p>
                         </div>
                     </div>
                 )}

pages/components/badges/index.tsx

@@ -177,7 +177,6 @@ const BadgesPage: FC = () => {
                     />
                 }
                 component={Badge}
-                isNew={true}
             />
         </AppLayout>
     );

pages/templates/dashboard/index.tsx

@@ -3,7 +3,6 @@ import AppLayout from '../../../components/layout/AppLayout';
 import SectionHeader from '../../../components/site/header/SectionHeader';
 import ComponentLayout from '../../../components/layout/ComponentLayout';
 import SimpleProjectDashboard from '../../../components/kit/templates/dashboardPages/projectDashboard/SimpleProjectDashboard';
-import KpiProject from '../../../components/kit/templates/dashboardPages/projectDashboard/KpitDashboard';
 
 const DashBoardTemplates = () => {
     return (
@@ -21,14 +20,6 @@ const DashBoardTemplates = () => {
                 element={<SimpleProjectDashboard />}
                 component={SimpleProjectDashboard}
             />
-            <ComponentLayout
-                showSwitchMode={true}
-                vertical={true}
-                fullscreen={true}
-                title="Kpi dashboard"
-                element={<KpiProject />}
-                component={KpiProject}
-            />
         </AppLayout>
     );
 };

pages/templates/datadashboard/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import AppLayout from '../../../components/layout/AppLayout';
+import SectionHeader from '../../../components/site/header/SectionHeader';
+import ComponentLayout from '../../../components/layout/ComponentLayout';
+import KpiProject from '../../../components/kit/templates/dashboardPages/dataDashboard/KpitDashboard';
+
+const dDtadashboardTemplates = () => {
+    return (
+        <AppLayout
+            title="Free admin datas dashboard templates for tailwind css"
+            desc="Tailwind dashboard and admin data templates for react, VueJS and Angular with tailwind css "
+        >
+            <SectionHeader backLink="/templates" title="Datas dashboard templates" />
+
+            <ComponentLayout
+                showSwitchMode={true}
+                vertical={true}
+                fullscreen={true}
+                title="Kpi dashboard"
+                element={<KpiProject />}
+                component={KpiProject}
+            />
+        </AppLayout>
+    );
+};
+
+export default dDtadashboardTemplates;