shadcngeeks

ShadcnGeeks

index.tsx

import { useState } from 'react'
  import reactLogo from './react.svg'
  import viteLogo from './vite.svg'
  import './App.css'
  
  function App() {
    const [count, setCount] = useState(0)
  
    return (
      <>
        <div>
          <a href="https://vitejs.dev" target="_blank">
            <img src={viteLogo} className="logo" alt="Vite logo" />
          </a>
          <a href="https://react.dev" target="_blank">
            <img src={reactLogo} className="logo react" alt="React logo" />
          </a>
        </div>
        <h1>Vite + React</h1>
        <div className="card">
          <button onClick={() => setCount((count) => count + 1)}>
            count is {count}
          </button>
          <p>
            Edit <code>src/App.jsx</code> and save to test HMR
          </p>
        </div>
        <p className="read-the-docs">
          Click on the Vite and React logos to learn more
        </p>
      </>
    )
  }
  
  export default App

Open Sandbox

1
2// this comment is here to demonstrate an extremely long line length, well beyond what you should probably allow in your own code, though sometimes you'll be highlighting code you can't refactor, which is unfortunate but should be handled gracefully
3
4function createElement({ node, style, useInlineStyles, key }) {
5  const { properties, type, tagName, value } = node;
6  if (type === "text") {
7    return value;
8  } else if (tagName) {
9    const TagName = tagName;
10    const childrenCreator = createChildren(style, useInlineStyles);
11    const props = (
12      useInlineStyles
13      ? { style: createStyleObject(properties.className, style) }
14      : { className: createClassNameString(properties.className) }
15    );
16    const children = childrenCreator(node.children);
17    return <TagName key={key} {...props}>{children}</TagName>;
18  }
19}
20

1
2// this comment is here to demonstrate an extremely long line length, well beyond what you should probably allow in your own code, though sometimes you'll be highlighting code you can't refactor, which is unfortunate but should be handled gracefully
3
4function createElement({ node, style, useInlineStyles, key }) {
5  const { properties, type, tagName, value } = node;
6  if (type === "text") {
7    return value;
8  } else if (tagName) {
9    const TagName = tagName;
10    const childrenCreator = createChildren(style, useInlineStyles);
11    const props = (
12      useInlineStyles
13      ? { style: createStyleObject(properties.className, style) }
14      : { className: createClassNameString(properties.className) }
15    );
16    const children = childrenCreator(node.children);
17    return <TagName key={key} {...props}>{children}</TagName>;
18  }
19}
20

1
2// this comment is here to demonstrate an extremely long line length, well beyond what you should probably allow in your own code, though sometimes you'll be highlighting code you can't refactor, which is unfortunate but should be handled gracefully
3
4function createElement({ node, style, useInlineStyles, key }) {
5  const { properties, type, tagName, value } = node;
6  if (type === "text") {
7    return value;
8  } else if (tagName) {
9    const TagName = tagName;
10    const childrenCreator = createChildren(style, useInlineStyles);
11    const props = (
12      useInlineStyles
13      ? { style: createStyleObject(properties.className, style) }
14      : { className: createClassNameString(properties.className) }
15    );
16    const children = childrenCreator(node.children);
17    return <TagName key={key} {...props}>{children}</TagName>;
18  }
19}
20