From 9d03e2bd3c51e007b34b23f8b220404df14aac48 Mon Sep 17 00:00:00 2001
From: Antonio Sonis <anthonysonis@gmail.com>
Date: Mon, 8 Jan 2024 10:28:26 +0100
Subject: [PATCH] feat: adding readme link to details of template and plugin

Signed-off-by: Antonio Sonis <anthonysonis@gmail.com>
---
 .../src/components/plugins/Plugin.jsx         | 12 +++++++---
 .../src/components/plugins/PluginDetail.jsx   | 21 ++++++++++++++---
 .../plugins/PluginDetail.module.css           |  3 +++
 .../templates/SelectTemplate.module.css       |  2 +-
 .../src/components/templates/Template.jsx     | 13 ++++++++---
 .../components/templates/TemplateDetail.jsx   | 23 +++++++++++++++----
 .../templates/TemplateDetail.module.css       |  3 +++
 src/renderer/src/styles/Typography.module.css |  3 +++
 8 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/src/renderer/src/components/plugins/Plugin.jsx b/src/renderer/src/components/plugins/Plugin.jsx
index c6cd1267..5c03472f 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 }) {
+function Plugin ({ name, onClickCardPlugin, isSelected, description, tags, author, homepage }) {
   const [showModalDetail, setShowModalDetail] = useState(false)
   let className = `${commonStyles.smallFlexBlock} ${styles.container} `
   className += isSelected ? styles.selected : styles.unSelected
@@ -58,6 +58,7 @@ function Plugin ({ name, onClickCardPlugin, isSelected, description, tags, autho
             description={description}
             tags={tags}
             author={author}
+            homepage={homepage}
             onClickSelectPlugin={() => handleClickSelectPluginDetail()}
           />
         </ModalDirectional>
@@ -86,7 +87,11 @@ Plugin.propTypes = {
   /**
    * author
     */
-  author: PropTypes.string
+  author: PropTypes.string,
+  /**
+   * homepage
+    */
+  homepage: PropTypes.string
 
 }
 
@@ -95,7 +100,8 @@ Plugin.defaultProps = {
   isSelected: false,
   description: '',
   tags: [],
-  author: ''
+  author: '',
+  homepage: ''
 }
 
 export default Plugin
diff --git a/src/renderer/src/components/plugins/PluginDetail.jsx b/src/renderer/src/components/plugins/PluginDetail.jsx
index 61ca8f51..c9a0ecfe 100644
--- a/src/renderer/src/components/plugins/PluginDetail.jsx
+++ b/src/renderer/src/components/plugins/PluginDetail.jsx
@@ -4,10 +4,10 @@ import typographyStyles from '~/styles/Typography.module.css'
 import commonStyles from '~/styles/CommonStyles.module.css'
 import styles from './PluginDetail.module.css'
 import Title from '~/components/ui/Title'
-import { Button, HorizontalSeparator, Icons, Tag } from '@platformatic/ui-components'
-import { MARGIN_0, OPACITY_30, RICH_BLACK, SMALL, WHITE } from '@platformatic/ui-components/src/components/constants'
+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, onClickSelectPlugin }) {
+function PluginDetail ({ name, description, tags, author, homepage, onClickSelectPlugin }) {
   return (
     <div className={styles.container}>
       <div className={`${commonStyles.largeFlexBlock} ${commonStyles.fullWidth}`}>
@@ -24,6 +24,16 @@ function PluginDetail ({ name, description, tags, author, onClickSelectPlugin })
               <Icons.UserComputerIcon color={WHITE} size={SMALL} />
               <span className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>{author}</span>
             </div>
+
+            {homepage && (
+              <>
+                <VerticalSeparator color={WHITE} backgroundColorOpacity={OPACITY_30} />
+                <a className={`${commonStyles.smallFlexRow} ${commonStyles.itemsCenter} ${styles.link}`} href={homepage} target='_blank' rel='noreferrer'>
+                  <span className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textTertiaryBlue}`}>README File</span>
+                  <Icons.ExpandIcon color={TERTIARY_BLUE} size={SMALL} />
+                </a>
+              </>
+            )}
           </div>
         </div>
 
@@ -78,6 +88,10 @@ PluginDetail.propTypes = {
    * author
     */
   author: PropTypes.string,
+  /**
+   * homepage
+    */
+  homepage: PropTypes.string,
   /**
    * onClickSelectPlugin
     */
@@ -88,6 +102,7 @@ PluginDetail.defaultProps = {
   description: '',
   tags: [],
   author: '',
+  homepage: '',
   onClickSelectPlugin: () => {}
 }
 
diff --git a/src/renderer/src/components/plugins/PluginDetail.module.css b/src/renderer/src/components/plugins/PluginDetail.module.css
index 207ced06..c96b3379 100644
--- a/src/renderer/src/components/plugins/PluginDetail.module.css
+++ b/src/renderer/src/components/plugins/PluginDetail.module.css
@@ -1,3 +1,6 @@
 .container {
   @apply flex flex-col justify-between h-full w-full
+}
+.link {
+  @apply no-underline
 }
\ No newline at end of file
diff --git a/src/renderer/src/components/templates/SelectTemplate.module.css b/src/renderer/src/components/templates/SelectTemplate.module.css
index 5aa32458..8b78a0da 100644
--- a/src/renderer/src/components/templates/SelectTemplate.module.css
+++ b/src/renderer/src/components/templates/SelectTemplate.module.css
@@ -20,7 +20,7 @@
   @apply lg:min-h-[29.9rem] lg:max-h-[29.5rem] h-full w-full relative
 }
 .select {
-  @apply basis-1/3
+  @apply basis-1/3  
 }
 .selectUl {
   @apply min-w-[150%]
diff --git a/src/renderer/src/components/templates/Template.jsx b/src/renderer/src/components/templates/Template.jsx
index 02488b25..028114dd 100644
--- a/src/renderer/src/components/templates/Template.jsx
+++ b/src/renderer/src/components/templates/Template.jsx
@@ -12,11 +12,12 @@ import { Button, Logo, ModalDirectional } from '@platformatic/ui-components'
 function Template ({
   platformaticService,
   name,
-  onClickCardTemplate,
   isSelected,
   description,
   tags,
-  author
+  author,
+  homepage,
+  onClickCardTemplate
 }) {
   const [showModalDetail, setShowModalDetail] = useState(false)
   let className = `${commonStyles.smallFlexBlock} ${styles.container} `
@@ -65,6 +66,7 @@ function Template ({
             description={description}
             tags={tags}
             author={author}
+            homepage={homepage}
             onClickSelectTemplate={() => handleClickSelectTemplateDetail()}
           />
         </ModalDirectional>
@@ -102,7 +104,11 @@ Template.propTypes = {
   /**
    * author
     */
-  author: PropTypes.string
+  author: PropTypes.string,
+  /**
+   * homepage
+    */
+  homepage: PropTypes.string
 }
 
 Template.defaultProps = {
@@ -112,6 +118,7 @@ Template.defaultProps = {
   onClickCardTemplate: () => {},
   description: '',
   author: '',
+  homepage: '',
   tags: []
 }
 
diff --git a/src/renderer/src/components/templates/TemplateDetail.jsx b/src/renderer/src/components/templates/TemplateDetail.jsx
index ee404086..3ed15199 100644
--- a/src/renderer/src/components/templates/TemplateDetail.jsx
+++ b/src/renderer/src/components/templates/TemplateDetail.jsx
@@ -4,10 +4,10 @@ import typographyStyles from '~/styles/Typography.module.css'
 import commonStyles from '~/styles/CommonStyles.module.css'
 import styles from './TemplateDetail.module.css'
 import Title from '~/components/ui/Title'
-import { Button, HorizontalSeparator, Icons, Tag } from '@platformatic/ui-components'
-import { MARGIN_0, OPACITY_30, RICH_BLACK, SMALL, WHITE } from '@platformatic/ui-components/src/components/constants'
+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, onClickSelectTemplate }) {
+function TemplateDetail ({ name, description, tags, author, homepage, onClickSelectTemplate }) {
   return (
     <div className={styles.container}>
       <div className={`${commonStyles.largeFlexBlock} ${commonStyles.fullWidth}`}>
@@ -24,6 +24,16 @@ function TemplateDetail ({ name, description, tags, author, onClickSelectTemplat
               <Icons.UserComputerIcon color={WHITE} size={SMALL} />
               <span className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>{author}</span>
             </div>
+
+            {homepage && (
+              <>
+                <VerticalSeparator color={WHITE} backgroundColorOpacity={OPACITY_30} />
+                <a className={`${commonStyles.smallFlexRow} ${commonStyles.itemsCenter} ${styles.link}`} href={homepage} target='_blank' rel='noreferrer'>
+                  <span className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textTertiaryBlue}`}>README File</span>
+                  <Icons.ExpandIcon color={TERTIARY_BLUE} size={SMALL} />
+                </a>
+              </>
+            )}
           </div>
         </div>
 
@@ -80,13 +90,18 @@ TemplateDetail.propTypes = {
   /**
    * onClickSelectTemplate
     */
-  onClickSelectTemplate: PropTypes.func
+  onClickSelectTemplate: PropTypes.func,
+  /**
+   * homepage
+    */
+  homepage: PropTypes.string
 }
 
 TemplateDetail.defaultProps = {
   description: '',
   tags: [],
   author: '',
+  homepage: '',
   onClickSelectTemplate: () => {}
 }
 
diff --git a/src/renderer/src/components/templates/TemplateDetail.module.css b/src/renderer/src/components/templates/TemplateDetail.module.css
index 207ced06..c96b3379 100644
--- a/src/renderer/src/components/templates/TemplateDetail.module.css
+++ b/src/renderer/src/components/templates/TemplateDetail.module.css
@@ -1,3 +1,6 @@
 .container {
   @apply flex flex-col justify-between h-full w-full
+}
+.link {
+  @apply no-underline
 }
\ No newline at end of file
diff --git a/src/renderer/src/styles/Typography.module.css b/src/renderer/src/styles/Typography.module.css
index 3dcc136d..e7d9816b 100644
--- a/src/renderer/src/styles/Typography.module.css
+++ b/src/renderer/src/styles/Typography.module.css
@@ -7,6 +7,9 @@
 .textErrorRed {
   @apply text-error-red;
 }
+.textTertiaryBlue {
+  @apply text-tertiary-blue;
+}
 .textCenter {
   @apply text-center;
 }