Function Server

www/src/components/Code.tsx:41–105

()

};

const Server = () => {
  const code = `
import { handler, initBridge } from "bridge";
import z from "zod";

const getName = handler({
  query: z.object({ name: z.string() }),
  resolve: ({ query }) => ({
    name: query.name,
    age: 21,
    date: new Date(),
  }),
});

const port = 8080;

initBridge({ routes: { getName } })
  .HTTPServer()
  .listen(port, () => {
    console.log(\`Listening on port \${port}\`);
  });
`.trim();
  return (
    <div className="border-white md:border-r border-opacity-5">
      <div className="px-3 py-1.5 mt-3 ml-5 text-xs mb-3 text-white text-opacity-50 rounded-md max-w-max">
        Server
      </div>
      <Highlight {...defaultProps} theme={theme} code={code} language={'typescript'}>
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <pre
            className={className}
            style={{
              padding: '8px 20px',
              marginBottom: 8,
              background: 'transparent',
            }}
          >
            {tokens.map((line, i) => (
              <div style={{ display: 'table-row' }} key={i} {...getLineProps({ line, key: i })}>
                <div
                  style={{
                    fontSize: 14,
                    display: 'table-cell',
                    textAlign: 'right',
                    userSelect: 'none',
                    opacity: 0.5,
                    paddingRight: '1em',
                    paddingLeft: '0.5em',
                  }}
                >
                  {i + 1}
                </div>
                <div style={{ display: 'table-cell', fontSize: '13px' }}>
                  {line.map((token, key) => (
                    <span key={key} {...getTokenProps({ token, key })} />
                  ))}
                </div>
              </div>