import React from "react";
import CodeBlock from "./components/ui/CodeBlock";

const files = [
  {
    title: 'customtheme.js',
    code: `const CustomTheme = {
  'code[class*="language-"]': {
    color: '#e0e0e0',
    background: '#000000',
    fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
    fontSize: '1em',
    lineHeight: '1.5',
  },
  'pre[class*="language-"]': {
    background: '#000000',
    padding: '1em',
    borderRadius: '5px',
    overflow: 'auto',
  },
  comment: {
    color: '#7C7C7C',
  },
  prolog: {
    color: '#7C7C7C',
  },
  doctype: {
    color: '#7C7C7C',
  },
  cdata: {
    color: '#7C7C7C',
  },
  punctuation: {
    color: '#c5c8c6',
  },
  '.namespace': {
    opacity: '.7',
  },
  property: {
    color: '#96CBFE',
  },
  keyword: {
    color: '#96CBFE',
  },
  tag: {
    color: '#96CBFE',
  },
  'class-name': {
    color: '#FFFFB6',
    textDecoration: 'underline',
  },
  boolean: {
    color: '#99CC99',
  },
  constant: {
    color: '#99CC99',
  },
  symbol: {
    color: '#f92672',
  },
  deleted: {
    color: '#f92672',
  },
  number: {
    color: '#FF73FD',
  },
  selector: {
    color: '#A8FF60',
  },
  'attr-name': {
    color: '#A8FF60',
  },
  string: {
    color: '#76ff7f',
  },
  char: {
    color: '#A8FF60',
  },
  builtin: {
    color: '#A8FF60',
  },
  inserted: {
    color: '#A8FF60',
  },
  variable: {
    color: '#C6C5FE',
  },
  operator: {
    color: '#EDEDED',
  },
  entity: {
    color: '#FFFFB6',
    cursor: 'help',
  },
  url: {
    color: '#96CBFE',
  },
  '.language-css .token.string': {
    color: '#87C38A',
  },
  '.style .token.string': {
    color: '#87C38A',
  },
  atrule: {
    color: '#F9EE98',
  },
  'attr-value': {
    color: '#F9EE98',
  },
  function: {
    color: '#f0abfc',
  },
  regex: {
    color: '#E9C062',
  },
  important: {
    color: '#fd971f',
    fontWeight: 'bold',
  },
  bold: {
    fontWeight: 'bold',
  },
  italic: {
    fontStyle: 'italic',
  },
};

export default CustomTheme;
`,
  },
];


const HomePage = () => {
  return (
    <div className="p-5">
      <CodeBlock codefile={files} defaultfile="index.tsx" />
    </div>
  );
};

export default HomePage;