diff --git a/src/components/App.tsx b/src/components/App.tsx
index 40a3dbb..ba2a05f 100644
--- 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 () => ;
function App() {
return (
-
+
);
}
diff --git a/src/components/CodeReview.tsx b/src/components/CodeReview.tsx
index e2981b8..4eb0bee 100644
--- 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 = ({ code, language }) => {
+export const CodeReview: React.FC = ({ code, language, width }) => {
return (
-
- {({ className, style, tokens, getLineProps, getTokenProps }) => (
-
- {tokens.map((line, i) => (
-
- {i + 1}
-
- {line.map((token, key) => (
-
- ))}
-
-
- ))}
-
- )}
-
- )
+
+
+ {({ className, style, tokens, getLineProps, getTokenProps }) => (
+
+ {tokens.map((line, i) => (
+
+ {i + 1}
+
+ {line.map((token, key) => (
+
+ ))}
+
+
+ ))}
+
+ )}
+
+
+ )
}
export default CodeReview;
\ No newline at end of file
diff --git a/src/components/CodeReviewCard.tsx b/src/components/CodeReviewCard.tsx
deleted file mode 100644
index aa64efd..0000000
--- a/src/components/CodeReviewCard.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from "react";
-import {Card} from "antd";
-import CodeReview from "./CodeReview";
-
-type Language =
- | "markup"
- | "bash"
- | "clike"
- | "c"
- | "cpp"
- | "css"
- | "javascript"
- | "jsx"
- | "coffeescript"
- | "actionscript"
- | "css-extr"
- | "diff"
- | "git"
- | "go"
- | "graphql"
- | "handlebars"
- | "json"
- | "less"
- | "makefile"
- | "markdown"
- | "objectivec"
- | "ocaml"
- | "python"
- | "reason"
- | "sass"
- | "scss"
- | "sql"
- | "stylus"
- | "tsx"
- | "typescript"
- | "wasm"
- | "yaml";
-
-export interface CodeReviewCardProps {
- code: string;
- language: Language;
-}
-export const CodeReviewCard: React.FC = ({ code, language }) => {
- return (
-
-
-
- )
-}
-
-export default CodeReviewCard;
\ No newline at end of file
diff --git a/src/stories/CodeReviewCard.stories.tsx b/src/stories/CodeReview.stories.tsx
similarity index 61%
rename from src/stories/CodeReviewCard.stories.tsx
rename to src/stories/CodeReview.stories.tsx
index ed08e4e..9f5a6c4 100644
--- a/src/stories/CodeReviewCard.stories.tsx
+++ b/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 = (args) => ;
+const Template: Story = (args) => ;
const jsxCode = `
(function someDemo() {
@@ -22,5 +22,6 @@ return () => ;
export const Default = Template.bind({});
Default.args = {
code: jsxCode,
- language: "jsx"
+ language: "jsx",
+ width: 500
}
\ No newline at end of file