[IMPROVE] refactor hard-coded component data into parameters (react component props)

app/components/discourserankedlist.js

@@ -28,81 +28,8 @@ function TimeSince(date) {
   return Math.floor(seconds) + ' seconds ago';
 }
 
-function Discourserankedlist(props) {
-  const Data = [
-    {
-      id: 1,
-      title:
-        'Upload stuck at 0% again after initially fixing with chanding site url in General admin options',
-      time: '6:57 PM',
-      upvotes: '89',
-      comments: '91',
-    },
-    {
-      id: 2,
-      title: 'Why can’t we have thumbnails for video uploads on mobile?',
-      time: '4:00 PM',
-      upvotes: '500',
-      comments: '4',
-    },
-    {
-      id: 3,
-      title: 'Can’t find “Users must use Two Factor Authentication” Option',
-      time: '12:53 PM',
-      upvotes: '456',
-      comments: '75',
-    },
-    {
-      id: 4,
-      title: 'Can’t “forget/remove my data” directly in RC 4.3.0 in livechat',
-      time: '8:36 AM',
-      upvotes: '234',
-      comments: '199',
-    },
-    {
-      id: 5,
-      title: 'Not migrating, control is locked',
-      time: '11:30 PM',
-      upvotes: '441',
-      comments: '74',
-    },
-    {
-      id: 6,
-      title:
-        'Upload stuck at 0% again after initially fixing with chanding site url in General admin options',
-      time: '7:14 PM',
-      upvotes: '972',
-      comments: '42',
-    },
-    {
-      id: 7,
-      title: 'Can’t find “Users must use Two Factor Authentication” Option',
-      time: '3:36 PM',
-      upvotes: '4279',
-      comments: '98',
-    },
-    {
-      id: 8,
-      title: 'Cannot Chat Log Level - Option has disappeared',
-      time: '11:06 AM',
-      upvotes: '51',
-      comments: '291',
-    },
-    {
-      id: 9,
-      title: 'Wrong IP Server',
-      time: '2:00 PM',
-      upvotes: '478',
-      comments: '25',
-    },
-    {
-      id: 10,
-      title: 'Not migrating, control is locked',
-      time: '11:03 PM',
-      upvotes: '16',
-      comments: '15',
-    },
-  ];
+function Discourserankedlist({activities}) {
+
   //generates random colour for border styling
   const color = [
     'border-primary',
@@ -130,7 +57,7 @@ function Discourserankedlist(props) {
       <Col
         className={`${styles.container} d-flex flex-wrap justify-content-center`}
       >
-        {Data.map(item => (
+        {activities.map(item => (
           <Col
             key={item.id}
             href={item.link}

app/components/growthcounters.js

@@ -1,37 +1,29 @@
-import styles from '../styles/Growthcounters.module.css';
-import Countup from './clientsideonly/countup';
+import styles from "../styles/Growthcounters.module.css";
+import Countup from "./clientsideonly/countup";
+export default function Growthcounters({ counters }) {
+
 
-export default function Growthcounters() {
   return (
     <>
-      <div className=' d-flex flex-row align-items-center justify-content-center '>
-        <div className='d-flex flex-column  pe-4 px-md-5 mx-md-3'>
-          <span suppressHydrationWarning={true}>
-            {process.browser && (
-              <Countup end={343433} className={` ${styles.countup}`} />
-            )}
-          </span>
-
-          <span className={` ${styles.text}`}>Users</span>
-        </div>
-
-        <div className='d-flex flex-column  px-4 px-md-5 mx-md-3 border-start border-gray'>
-          <span suppressHydrationWarning={true}>
-            {process.browser && (
-              <Countup end={1294056} className={` ${styles.countup}`} />
-            )}
-          </span>
-          <span className={` ${styles.text}`}>Messages</span>
-        </div>
+      <div className=" d-flex flex-row align-items-center justify-content-center ">
+        {counters.map((count, index) => {
+          return (
+            <div
+              className={
+                "d-flex flex-column  pe-4 px-md-5 mx-md-3 " +
+                (index != 0 ? "border-start border-gray" : "")
+              }
+            >
+              <span suppressHydrationWarning={true}>
+                {process.browser && (
+                  <Countup end={count.count} className={` ${styles.countup}`} />
+                )}
+              </span>
 
-        <div className='d-flex flex-column  ps-4 px-md-5 mx-md-3 border-start border-gray'>
-          <span suppressHydrationWarning={true}>
-            {process.browser && (
-              <Countup end={507} className={` ${styles.countup}`} />
-            )}
-          </span>
-          <span className={` ${styles.text}`}>Online</span>
-        </div>
+              <span className={` ${styles.text}`}>{count.title}</span>
+            </div>
+          );
+        })}
       </div>
     </>
   );

app/components/infotiles.js

@@ -2,10 +2,11 @@ import Image from "next/image";
 import Link from "next/link";
 import Styles from "../styles/Infotiles.module.css";
 
-export default function Infotiles({ data }) {
+export default function Infotiles(data) {
+
   return (
     <>
-      {data.map((obj) => (
+      {data && data.infotiles && data.infotiles.length && data.infotiles.map((obj) => (
         <div
           key={obj.id}
           className={obj.imageUrl ? Styles.cardWithImage : Styles.card}
@@ -19,9 +20,9 @@ export default function Infotiles({ data }) {
             />
           )}
           <div className={Styles.card_content}>
-            <h5 className={Styles.card_heading}>{obj.name}</h5>
+            <h5 className={Styles.card_heading}>{obj.title}</h5>
             {obj.bio && <p className="fs-light">{obj.bio}</p>}
-            <p className={Styles.card_body}>{obj.content}</p>
+            <p className={Styles.card_body}>{obj.description}</p>
             {obj.live && <Link href={obj.confHref}><button className={Styles.actionBtn}>Live</button></Link>}
           </div>
         </div>

app/components/newscarousel.js

@@ -48,13 +48,21 @@ function Newscarousel(props) {
             },
           },
           {
-            breakpoint: 600,
+            breakpoint: 800,
             settings: {
               slidesToShow: 2,
               slidesToScroll: 2,
               initialSlide: 2,
             },
           },
+          {
+            breakpoint: 600,
+            settings: {
+              slidesToShow: 1,
+              slidesToScroll: 2,
+              initialSlide: 2,
+            },
+          },
         ]}
         prevArrow={
           <svg

app/components/personcircle.js

@@ -0,0 +1,23 @@
+import { Col } from "react-bootstrap";
+import styles from "../styles/Personacircle.module.css";
+import {getStrapiURL } from '../lib/api';
+export default function Personcircle({persons}) {
+  return (
+    <>
+      <Col
+        className={`${styles.personas} d-flex flex-wrap justify-content-center`}
+      >
+        {persons.map((person) => {
+          return (
+            <span className={`${styles.persona}`}>
+              <div className={styles.svg}> 
+                <img src={getStrapiURL("")+person.avatar?.url} />
+              </div>
+              <div className={styles.title}>{person.name}</div>
+            </span>
+          );
+        })}
+      </Col>
+    </>
+  );
+}