Merge pull request #22 from weseek/support/plugincards

update

packages/app/src/components/Admin/PluginsExtension/PluginCard.module.scss

@@ -0,0 +1,78 @@
+.plugin_card :global {
+
+  /*** iOS ***/
+  .switch__label {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+  }
+  .switch__content {
+    position: relative;
+    display: block;
+    height: 31px;
+    overflow: hidden;
+    cursor: pointer;
+    border-radius: 30px;
+  }
+  .switch__content:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: calc(100% - 3px);
+    height: calc(100% - 3px);
+    content: '';
+    background-color: #fff;
+    border: 1.5px solid #E5E5EA;
+    border-radius: 30px;
+  }
+  .switch__content:after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    background-color: transparent;
+    border-radius: 30px;
+    -webkit-transition: all .5s;
+    -moz-transition: all .5s;
+    -ms-transition: all .5s;
+    -o-transition: all .5s;
+    transition: all .5s;
+  }
+  .switch__input {
+    display: none;
+  }
+
+  .switch__circle {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    display: block;
+    width: 27px;
+    height: 27px;
+    background-color: #fff;
+    -webkit-border-radius: 20px;
+    border-radius: 20px;
+    -webkit-box-shadow: 0 2px 6px #999;
+    box-shadow: 0 2px 6px #999;
+    -webkit-transition: all .5s;
+    -moz-transition: all .5s;
+    -ms-transition: all .5s;
+    -o-transition: all .5s;
+    transition: all .5s;
+  }
+  .switch__input:checked ~ .switch__circle {
+    left: 21px;
+  }
+
+  .switch__input:checked ~ .switch__content:after {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #0078D7;
+  }
+}

packages/app/src/components/Admin/PluginsExtension/PluginCard.tsx

@@ -1,12 +1,14 @@
 // import { faCircleArrowDown, faCircleCheck } from '@fortawesome/free-solid-svg-icons';
 // import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import Image from 'next/image';
 import Link from 'next/link';
 
 import { SearchResultItem } from '~/models/SearchResultItem';
 
+import styles from './PluginCard.module.scss';
+
 
 type Props = {
   name: string,
@@ -14,27 +16,19 @@ type Props = {
   description: string,
 }
 
-export const PluginCard = (props: Props) => {
-  // const {
-  //   name, fullName, description, htmlUrl, topics, stargazersCount, owner,
-  // } = props;
+export const PluginCard = (props: Props): JSX.Element => {
   const {
     name, url, description,
   } = props;
-  const [isEnabled, setIsEnabled] = useState(true);
+  // const [isEnabled, setIsEnabled] = useState(true);
 
-  const updateCheckboxHandler = (event: { target: { checked: boolean }; }) => {
-    if (isEnabled === true) {
-      setIsEnabled(true);
-    }
-    else {
-      setIsEnabled(false);
-    }
-  };
+  // const checkboxHandler = useCallback(() => {
+  //   setIsEnabled(false);
+  // }, []);
 
   return (
     <div className="card shadow border-0" key={name}>
-      <div className="card-body px-5 py-4">
+      <div className="card-body px-5 py-4 mt-3">
         <div className="row mb-3">
           <div className="col-9">
             <h2 className="card-title h3 border-bottom pb-2 mb-3">
@@ -42,16 +36,25 @@ export const PluginCard = (props: Props) => {
             </h2>
             <p className="card-text text-muted">{description}</p>
           </div>
-          <div className="col-3">
-            <div className="custom-control custom-switch custom-switch-lg custom-switch-slack">
+          <div className='col-3'>
+            <div className={`${styles.plugin_card}`}>
+              <div className="switch">
+                <label className="switch__label">
+                  <input type="checkbox" className="switch__input" checked/>
+                  <span className="switch__content"></span>
+                  <span className="switch__circle"></span>
+                </label>
+              </div>
+            </div>
+            {/* <div className="custom-control custom-switch custom-switch-lg custom-switch-slack">
               <input
                 type="checkbox"
                 className="custom-control-input border-0"
                 checked={isEnabled}
-                onChange={updateCheckboxHandler}
+                onChange={checkboxHandler}
               />
               <label className="custom-control-label align-center"></label>
-            </div>
+            </div> */}
             {/* <Image className="mx-auto" alt="GitHub avator image" src={owner.avatar_url} width={250} height={250} /> */}
           </div>
         </div>

packages/app/src/components/Admin/PluginsExtension/PluginsExtensionPageContents.tsx

@@ -34,17 +34,17 @@ export const PluginsExtensionPageContents = (): JSX.Element => {
             <PluginCard
               name={'growi-plugin-templates-for-office'}
               url={'https://github.com/weseek/growi-plugin-templates-for-office'}
-              description={'growi-plugin-templates-for-office'}
+              description={'GROWI markdown templates for office.'}
             />
             <PluginCard
               name={'growi-plugin-theme-welcome-to-fumiya-room'}
               url={'https://github.com/weseek/growi-plugin-theme-welcome-to-fumiya-room'}
-              description={'growi-plugin-theme-welcome-to-fumiya-room'}
+              description={'Welcome to fumiya\'s room! This is very very "latest" design...'}
             />
             <PluginCard
               name={'growi-plugin-copy-code-to-clipboard'}
               url={'https://github.com/weseek/growi-plugin-copy-code-to-clipboard'}
-              description={'growi-plugin-copy-code-to-clipboard'}
+              description={'Add copy button on code blocks.'}
             />
             {/* {data?.items.map((item: SearchResultItem) => {
               return <PluginCard key={item.name} {...item} />;