website: update color.

uiwjs · Jun 29, 2021 · 7c4c1e9 · 7c4c1e9
1 parent 976c099
commit 7c4c1e9
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -54,39 +54,45 @@ export default function App() {
           </div>
           <div className={styles.code}>
             <Code
+              color={color}
               lang="swift"
               title="SwiftUI"
               code={`Color(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}).opacity(${color.a})`}
             />
             <Code
+              color={color}
               lang="swift"
               title="Swift for iOS"
               code={`UIColor(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}, alpha: ${
                 color.a
               })`}
             />
             <Code
+              color={color}
               lang="swift"
               title="Swift for macOS"
               code={`NSColor(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}, alpha: ${
                 color.a
               })`}
             />
             <Code
+              color={color}
               lang="objectivec"
               title="Objective-C for iOS"
               code={`[UIColor colorWithRed: ${color.r / 100} green: ${color.g / 100} blue: ${color.b / 100} alpha: ${
                 color.a
               }];`}
             />
             <Code
+              color={color}
               lang="objectivec"
               title="Objective-C for macOS"
               code={`[NSColor colorWithCalibratedRed: ${color.r / 100} green: ${color.g / 100} blue: ${
                 color.b / 100
               } alpha: ${color.a}];`}
             />
             <Code
+              color={color}
               lang="csharp"
               title="Xamarin (C#)"
               code={`new UIColor(red: ${color.r / 100}f, green: ${color.g / 100}f, blue: ${color.b / 100}f, alpha: ${

diff --git a/src/app/Code.tsx b/src/app/Code.tsx
@@ -1,5 +1,6 @@
 import copyTextToClipboard from '@uiw/copy-to-clipboard';
 import { useEffect, useState } from 'react';
+import { RGBColor } from 'react-color';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-csharp';
 import 'prismjs/components/prism-swift';
@@ -12,10 +13,11 @@ type CodeProps = {
   title: string;
   lang: string;
   code: string;
+  color?: RGBColor;
 };
 
 export default function Code(props: CodeProps) {
-  const { title, lang, code } = props || {};
+  const { title, lang, code, color } = props || {};
   const [isCopy, setIsCopy] = useState(false);
   const [html, setHtml] = useState('');
   function copyHandle() {
@@ -41,7 +43,21 @@ export default function Code(props: CodeProps) {
   return (
     <div className={styles.warpper}>
       <div className={styles.tool}>
-        <div className={styles.title}>{title}</div>
+        <div className={styles.title}>
+          {color && (
+            <span
+              style={{
+                marginRight: 10,
+                borderRadius: 3,
+                display: 'inline-block',
+                minWidth: 12,
+                minHeight: 12,
+                backgroundColor: `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`,
+              }}
+            />
+          )}
+          {title}
+        </div>
         <div className={`${styles.copy} ${isCopy ? styles.copied : ''}`} onClick={copyHandle}>
           {isCopy ? 'Copied' : 'Copy'}
         </div>