added component list

Author: prasanna1211

docs/client/components/PlaygroundPage/PlaygroundWithPreview/editor.css

@@ -0,0 +1,115 @@
+:global .cm-s-custom {
+  &.CodeMirror {
+    background: #282c34;
+    color: #abb2bf;
+    height: 75%;
+  }
+
+  & div.CodeMirror-selected {
+    background: #3e4451;
+  }
+
+  & .CodeMirror-line::selection,
+  & .CodeMirror-line > span::selection,
+  & .CodeMirror-line > span > span::selection {
+    background: rgba(73, 72, 62, 0.99);
+  }
+
+  & .CodeMirror-line::-moz-selection,
+  & .CodeMirror-line > span::-moz-selection,
+  & .CodeMirror-line > span > span::-moz-selection {
+    background: rgba(73, 72, 62, 0.99);
+  }
+
+  & .CodeMirror-gutters {
+    background: #282c34;
+    border-right: 1px solid #282c34;
+  }
+
+  & .CodeMirror-guttermarker {
+    color: white;
+  }
+
+  & .CodeMirror-guttermarker-subtle {
+    color: #d0d0d0;
+  }
+
+  & .CodeMirror-linenumber {
+    color: #4b5363;
+  }
+
+  & .CodeMirror-cursor {
+    border-left: 1px solid #528bff;
+  }
+
+  & span.cm-comment {
+    color: #667689;
+  }
+
+  & span.cm-atom {
+    color: #64b6c3;
+  }
+
+  & span.cm-number {
+    color: #d19a66;
+  }
+
+  & span.cm-property,
+  & span.cm-attribute {
+    color: #abb2bf;
+  }
+
+  & span.cm-keyword {
+    color: #d86c74;
+  }
+
+  & span.cm-string {
+    color: #98c379;
+  }
+
+  & span.cm-variable {
+    color: #abb2bf;
+  }
+
+  & span.cm-variable-2 {
+    color: #c678dd;
+  }
+
+  & span.cm-variable-3 {
+    color: #64b6c3;
+  }
+
+  & span.cm-def {
+    color: #6caff2;
+  }
+
+  & span.cm-bracket {
+    color: #abb2bf;
+  }
+
+  & span.cm-tag {
+    color: #d86c74;
+  }
+
+  & span.cm-header {
+    color: #abb2bf;
+  }
+
+  & span.cm-link {
+    color: #98c379;
+  }
+
+  & span.cm-error {
+    background: #f92672;
+    color: red;
+  }
+
+  & .CodeMirror-activeline-background {
+    background: #2c323b;
+  }
+
+  & .CodeMirror-matchingbracket {
+    color: #abb2bf !important;
+    text-decoration: underline;
+  }
+}

docs/client/components/common/componentList.js

@@ -0,0 +1,44 @@
+export const componentList = [
+  {
+    name: 'Component 1',
+  },
+  {
+    name: 'Component 2',
+  },
+  {
+    name: 'Component 3',
+  },
+  {
+    name: 'Component 4',
+  },
+  {
+    name: 'Component 5',
+  },
+  {
+    name: 'Component 6',
+  },
+  {
+    name: 'Component 7',
+  },
+  {
+    name: 'Component 8',
+  },
+  {
+    name: 'Component 9',
+  },
+  {
+    name: 'Component 10',
+  },
+  {
+    name: 'Component 11',
+  },
+  {
+    name: 'Component 12',
+  },
+  {
+    name: 'Component 13',
+  },
+  {
+    name: 'Component 14',
+  },
+];