add width prop

codefreak · Mar 30, 2021 · 18bdfaa · 18bdfaa
1 parent 63084d6
commit 18bdfaa
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 84 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import './App.css';
-import CodeReviewCard from "./CodeReviewCard";
+import CodeReview from "./CodeReview";
 
 const exampleCode = `
 (function someDemo() {
@@ -14,7 +14,7 @@ return () => <App />;
 function App() {
   return (
       <div className={"code"}>
-        <CodeReviewCard code={exampleCode} language={"jsx"}/>
+        <CodeReview code={exampleCode} language={"jsx"} width={500}/>
       </div>
   );
 }

diff --git a/src/components/CodeReview.tsx b/src/components/CodeReview.tsx
@@ -1,8 +1,8 @@
-import React, {FunctionComponent} from "react";
-import { Pre, Line, LineNo, LineContent } from "./styles"
-import Highlight, { defaultProps } from "prism-react-renderer";
-import theme from "prism-react-renderer/themes/nightOwl";
-import "./CodeReview.less";
+import React from "react";
+import {Card} from "antd";
+import Highlight, {defaultProps} from "prism-react-renderer";
+import theme from "prism-react-renderer/themes/github";
+import {Line, LineContent, LineNo, Pre} from "./styles";
 
 type Language =
     | "markup"
@@ -38,30 +38,32 @@ type Language =
     | "wasm"
     | "yaml";
 
-type CodeReviewProps = {
-    code: string
-    language: Language
+export interface CodeReviewProps  {
+    code: string;
+    language: Language;
+    width: number;
 }
-
-export const CodeReview: FunctionComponent<CodeReviewProps> = ({ code, language }) => {
+export const CodeReview: React.FC<CodeReviewProps> = ({ code, language, width }) => {
     return (
-        <Highlight {...defaultProps} theme={theme} code={code} language={language}>
-            {({ className, style, tokens, getLineProps, getTokenProps }) => (
-                <Pre className={className} style={style}>
-                    {tokens.map((line, i) => (
-                        <Line key={i} {...getLineProps({ line, key: i })}>
-                            <LineNo>{i + 1}</LineNo>
-                            <LineContent>
-                                {line.map((token, key) => (
-                                    <span key={key} {...getTokenProps({ token, key })} />
-                                ))}
-                            </LineContent>
-                        </Line>
-                    ))}
-                </Pre>
-            )}
-        </Highlight>
-    )
+            <Card style={{ width: width }}>
+                <Highlight {...defaultProps} theme={theme} code={code} language={language}>
+                    {({ className, style, tokens, getLineProps, getTokenProps }) => (
+                        <Pre className={className} style={style}>
+                            {tokens.map((line, i) => (
+                                <Line key={i} {...getLineProps({ line, key: i })}>
+                                    <LineNo>{i + 1}</LineNo>
+                                    <LineContent>
+                                        {line.map((token, key) => (
+                                            <span key={key} {...getTokenProps({ token, key })} />
+                                        ))}
+                                    </LineContent>
+                                </Line>
+                            ))}
+                        </Pre>
+                    )}
+                </Highlight>
+            </Card>
+        )
 }
 
 export default CodeReview;
diff --git a/src/components/CodeReviewCard.tsx b/src/components/CodeReviewCard.tsx
diff --git a/src/stories/CodeReviewCard.stories.tsx → src/stories/CodeReview.stories.tsx b/src/stories/CodeReviewCard.stories.tsx → src/stories/CodeReview.stories.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import {CodeReviewCard, CodeReviewCardProps} from "../components/CodeReviewCard";
+import {CodeReview, CodeReviewProps} from "../components/CodeReview";
 import { Story, Meta } from '@storybook/react/types-6-0';
 
 
 export default {
-    componenet: CodeReviewCard,
+    component: CodeReview,
     title: 'CodeReviewCard'
 } as Meta;
 
-const Template: Story<CodeReviewCardProps> = (args) => <CodeReviewCard {...args} />;
+const Template: Story<CodeReviewProps> = (args) => <CodeReview {...args} />;
 
 const jsxCode = `
 (function someDemo() {
@@ -22,5 +22,6 @@ return () => <App />;
 export const Default = Template.bind({});
 Default.args = {
     code: jsxCode,
-    language: "jsx"
+    language: "jsx",
+    width: 500
 }