From 79120379040a92c2924ffa597cd0f5208b76cec0 Mon Sep 17 00:00:00 2001
From: Antonio Sonis <anthonysonis@gmail.com>
Date: Mon, 8 Jan 2024 17:07:45 +0100
Subject: [PATCH] fix: updating details for the plugin and template

Signed-off-by: Antonio Sonis <anthonysonis@gmail.com>
---
 .../src/components/plugins/Plugin.jsx         | 14 ++++++++---
 .../src/components/plugins/PluginDetail.jsx   | 23 ++++++++++++++++++-
 .../src/components/templates/Template.jsx     | 10 ++++++++
 .../components/templates/TemplateDetail.jsx   | 23 ++++++++++++++++++-
 4 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/src/renderer/src/components/plugins/Plugin.jsx b/src/renderer/src/components/plugins/Plugin.jsx
index 5c03472f..9d676381 100644
--- a/src/renderer/src/components/plugins/Plugin.jsx
+++ b/src/renderer/src/components/plugins/Plugin.jsx
@@ -9,7 +9,7 @@ import { Button, ModalDirectional } from '@platformatic/ui-components'
 import { useState } from 'react'
 import PluginDetail from './PluginDetail'
 
-function Plugin ({ name, onClickCardPlugin, isSelected, description, tags, author, homepage }) {
+function Plugin ({ name, onClickCardPlugin, isSelected, description, tags, author, homepage, downloads }) {
   const [showModalDetail, setShowModalDetail] = useState(false)
   let className = `${commonStyles.smallFlexBlock} ${styles.container} `
   className += isSelected ? styles.selected : styles.unSelected
@@ -59,6 +59,7 @@ function Plugin ({ name, onClickCardPlugin, isSelected, description, tags, autho
             tags={tags}
             author={author}
             homepage={homepage}
+            downloads={downloads}
             onClickSelectPlugin={() => handleClickSelectPluginDetail()}
           />
         </ModalDirectional>
@@ -91,8 +92,14 @@ Plugin.propTypes = {
   /**
    * homepage
     */
-  homepage: PropTypes.string
-
+  homepage: PropTypes.string,
+  /**
+   * downloads
+    */
+  downloads: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ])
 }
 
 Plugin.defaultProps = {
@@ -101,6 +108,7 @@ Plugin.defaultProps = {
   description: '',
   tags: [],
   author: '',
+  downloads: 0,
   homepage: ''
 }
 
diff --git a/src/renderer/src/components/plugins/PluginDetail.jsx b/src/renderer/src/components/plugins/PluginDetail.jsx
index c9a0ecfe..e2e91667 100644
--- a/src/renderer/src/components/plugins/PluginDetail.jsx
+++ b/src/renderer/src/components/plugins/PluginDetail.jsx
@@ -7,7 +7,7 @@ import Title from '~/components/ui/Title'
 import { Button, HorizontalSeparator, Icons, Tag, VerticalSeparator } from '@platformatic/ui-components'
 import { MARGIN_0, OPACITY_30, RICH_BLACK, SMALL, TERTIARY_BLUE, WHITE } from '@platformatic/ui-components/src/components/constants'
 
-function PluginDetail ({ name, description, tags, author, homepage, onClickSelectPlugin }) {
+function PluginDetail ({ name, description, tags, author, homepage, downloads, onClickSelectPlugin }) {
   return (
     <div className={styles.container}>
       <div className={`${commonStyles.largeFlexBlock} ${commonStyles.fullWidth}`}>
@@ -20,11 +20,24 @@ function PluginDetail ({ name, description, tags, author, homepage, onClickSelec
           />
           <p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>{description}</p>
           <div className={`${commonStyles.mediumFlexRow} ${commonStyles.fullWidth} ${commonStyles.itemsCenter} `}>
+            <div className={`${commonStyles.smallFlexRow} ${commonStyles.itemsCenter}`}>
+              <Icons.ComputerIcon color={WHITE} size={SMALL} />
+              <span className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>{downloads}</span>
+            </div>
+
+            <VerticalSeparator color={WHITE} backgroundColorOpacity={OPACITY_30} />
+
             <div className={`${commonStyles.smallFlexRow} ${commonStyles.itemsCenter}`}>
               <Icons.UserComputerIcon color={WHITE} size={SMALL} />
               <span className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>{author}</span>
             </div>
 
+            <VerticalSeparator color={WHITE} backgroundColorOpacity={OPACITY_30} />
+
+            <div className={`${commonStyles.smallFlexRow} ${commonStyles.itemsCenter}`}>
+              <span className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>Supported by: {author}</span>
+            </div>
+
             {homepage && (
               <>
                 <VerticalSeparator color={WHITE} backgroundColorOpacity={OPACITY_30} />
@@ -92,6 +105,13 @@ PluginDetail.propTypes = {
    * homepage
     */
   homepage: PropTypes.string,
+  /**
+   * downloads
+    */
+  downloads: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
   /**
    * onClickSelectPlugin
     */
@@ -103,6 +123,7 @@ PluginDetail.defaultProps = {
   tags: [],
   author: '',
   homepage: '',
+  downloads: 0,
   onClickSelectPlugin: () => {}
 }
 
diff --git a/src/renderer/src/components/templates/Template.jsx b/src/renderer/src/components/templates/Template.jsx
index 028114dd..d2fc8357 100644
--- a/src/renderer/src/components/templates/Template.jsx
+++ b/src/renderer/src/components/templates/Template.jsx
@@ -17,6 +17,7 @@ function Template ({
   tags,
   author,
   homepage,
+  downloads,
   onClickCardTemplate
 }) {
   const [showModalDetail, setShowModalDetail] = useState(false)
@@ -66,6 +67,7 @@ function Template ({
             description={description}
             tags={tags}
             author={author}
+            downloads={downloads}
             homepage={homepage}
             onClickSelectTemplate={() => handleClickSelectTemplateDetail()}
           />
@@ -105,6 +107,13 @@ Template.propTypes = {
    * author
     */
   author: PropTypes.string,
+  /**
+   * downloads
+    */
+  downloads: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
   /**
    * homepage
     */
@@ -118,6 +127,7 @@ Template.defaultProps = {
   onClickCardTemplate: () => {},
   description: '',
   author: '',
+  downloads: 0,
   homepage: '',
   tags: []
 }
diff --git a/src/renderer/src/components/templates/TemplateDetail.jsx b/src/renderer/src/components/templates/TemplateDetail.jsx
index 3ed15199..e981e7af 100644
--- a/src/renderer/src/components/templates/TemplateDetail.jsx
+++ b/src/renderer/src/components/templates/TemplateDetail.jsx
@@ -7,7 +7,7 @@ import Title from '~/components/ui/Title'
 import { Button, HorizontalSeparator, Icons, Tag, VerticalSeparator } from '@platformatic/ui-components'
 import { MARGIN_0, OPACITY_30, RICH_BLACK, SMALL, TERTIARY_BLUE, WHITE } from '@platformatic/ui-components/src/components/constants'
 
-function TemplateDetail ({ name, description, tags, author, homepage, onClickSelectTemplate }) {
+function TemplateDetail ({ name, description, tags, author, homepage, downloads, onClickSelectTemplate }) {
   return (
     <div className={styles.container}>
       <div className={`${commonStyles.largeFlexBlock} ${commonStyles.fullWidth}`}>
@@ -20,11 +20,24 @@ function TemplateDetail ({ name, description, tags, author, homepage, onClickSel
           />
           <p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>{description}</p>
           <div className={`${commonStyles.mediumFlexRow} ${commonStyles.fullWidth} ${commonStyles.itemsCenter} `}>
+            <div className={`${commonStyles.smallFlexRow} ${commonStyles.itemsCenter}`}>
+              <Icons.ComputerIcon color={WHITE} size={SMALL} />
+              <span className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>{downloads}</span>
+            </div>
+
+            <VerticalSeparator color={WHITE} backgroundColorOpacity={OPACITY_30} />
+
             <div className={`${commonStyles.smallFlexRow} ${commonStyles.itemsCenter}`}>
               <Icons.UserComputerIcon color={WHITE} size={SMALL} />
               <span className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>{author}</span>
             </div>
 
+            <VerticalSeparator color={WHITE} backgroundColorOpacity={OPACITY_30} />
+
+            <div className={`${commonStyles.smallFlexRow} ${commonStyles.itemsCenter}`}>
+              <span className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>Supported by: {author}</span>
+            </div>
+
             {homepage && (
               <>
                 <VerticalSeparator color={WHITE} backgroundColorOpacity={OPACITY_30} />
@@ -87,6 +100,13 @@ TemplateDetail.propTypes = {
    * author
     */
   author: PropTypes.string,
+  /**
+   * downloads
+    */
+  downloads: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
   /**
    * onClickSelectTemplate
     */
@@ -101,6 +121,7 @@ TemplateDetail.defaultProps = {
   description: '',
   tags: [],
   author: '',
+  downloads: 0,
   homepage: '',
   onClickSelectTemplate: () => {}
 }