add screen of nodes

components/common/GenericHeader.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Button } from 'flowbite-react'
+
+const GenericHeader = ({ title, subTitle, buttonText, buttonColor }) => {
+    return (
+        <>
+            <h1 className="text-xl font-bold leading-tight tracking-tight text-white sm:text-5xl">
+                {title}
+            </h1>
+            <p className="mt-3 mb-8 font-light text-gray-500 sm:text-xl dark:text-gray-400">
+                {subTitle}
+            </p>
+            <Button color={buttonColor}>
+                <span>{buttonText}</span>
+            </Button>
+        </>
+    )
+}
+
+GenericHeader.defaultProps = {
+    buttonColor: 'blue',
+}
+
+export default GenericHeader

components/nodes/Nodes.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from 'react'
+
+import GenericHeader from '../common/GenericHeader'
+import NodesCard from './NodesCard'
+
+export const NodesData = [
+    {
+        id: '1',
+        name: 'TalkingFace',
+        version: 'v4.0',
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, odio lobortis ultricies interdum, urna lorem fermentum libero, vel accumsan magna purus a lacus. ',
+        node: 'Node Publishing, Inc.',
+        image: '/images/Image.png',
+        rating: '4.8 ',
+        downloads: '977k ',
+    },
+    {
+        id: '2',
+        name: 'Face',
+        version: 'v4.0',
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, odio lobortis ultricies interdum, urna lorem fermentum libero, vel accumsan magna purus a lacus. ',
+        node: 'Node Publishing, Inc.',
+        image: '/images/Image.png',
+        rating: '4.8 ',
+        downloads: '977k ',
+    },
+    {
+        id: '3',
+        name: 'Face',
+        version: 'v4.0',
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, odio lobortis ultricies interdum, urna lorem fermentum libero, vel accumsan magna purus a lacus. ',
+        node: 'Node Publishing, Inc.',
+        image: '/images/Image.png',
+        rating: '4.8 ',
+        downloads: '977k',
+    },
+    {
+        id: '4',
+        name: 'TalkingFace',
+        version: 'v4.0',
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, odio lobortis ultricies interdum, urna lorem fermentum libero, vel accumsan magna purus a lacus. ',
+        node: 'Node Publishing, Inc.',
+        image: '/images/Image.png',
+        rating: '4.8 ',
+        downloads: '977k',
+    },
+    {
+        id: '5',
+        name: 'TalkingFace',
+        version: 'v4.0',
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, odio lobortis ultricies interdum, urna lorem fermentum libero, vel accumsan magna purus a lacus. ',
+        node: 'Node Publishing, Inc.',
+        image: '/images/Image.png',
+        rating: '4.8 ',
+        downloads: '977k ',
+    },
+    {
+        id: '6',
+        name: 'TalkingFace',
+        version: 'v4.0',
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, odio lobortis ultricies interdum, urna lorem fermentum libero, vel accumsan magna purus a lacus. ',
+        node: 'Node Publishing, Inc.',
+        image: '/images/Image.png',
+        rating: '4.8 ',
+        downloads: '977k ',
+    },
+    {
+        id: '7',
+        name: 'TalkingFace',
+        version: 'v4.0',
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, odio lobortis ultricies interdum, urna lorem fermentum libero, vel accumsan magna purus a lacus. ',
+        node: 'Node Publishing, Inc.',
+        image: '/images/Image.png',
+        rating: '4.8 ',
+        downloads: '977k ',
+    },
+    {
+        id: '7',
+        name: 'TalkingFace',
+        version: 'v4.0',
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, odio lobortis ultricies interdum, urna lorem fermentum libero, vel accumsan magna purus a lacus. ',
+        node: 'Node Publishing, Inc.',
+        image: '/images/Image.png',
+        rating: '4.8 ',
+        downloads: '977k ',
+    },
+    {
+        id: '8',
+        name: 'TalkingFace',
+        version: 'v4.0',
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, odio lobortis ultricies interdum, urna lorem fermentum libero, vel accumsan magna purus a lacus. ',
+        node: 'Node Publishing, Inc.',
+        image: '/images/Image.png',
+        rating: '4.8 ',
+        downloads: '977k ',
+    },
+    {
+        id: '9',
+        version: 'v4.0',
+        name: 'TalkingFace',
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, odio lobortis ultricies interdum, urna lorem fermentum libero, vel accumsan magna purus a lacus. ',
+        node: 'Node Publishing, Inc.',
+        image: '/images/Image.png',
+        rating: '4.8 ',
+        downloads: '977k ',
+    },
+]
+const Nodes: React.FC = () => {
+    return (
+        <section className="h-full mt-8 bg-gray-900 lg:mt-20">
+            <GenericHeader
+                title="Your nodes"
+                subTitle="View and edit your nodes and publishers"
+                buttonText="New Publisher"
+            />
+            {/* <FilterRegistry /> */}
+            <div className="grid gap-4 mb-6 lg:mb-5 md:grid-cols-3 xl:grid-cols-4">
+                {NodesData.map((member, index) => (
+                    <NodesCard key={index} {...member} />
+                ))}
+            </div>
+        </section>
+    )
+}
+
+export default Nodes