frontend.code-snippets

{
  "Next.js Page (twin.macro)": {
    "scope": "typescriptreact",
    "prefix": "Page",
    "body": [
      "import React from 'react'",
      "import 'twin.macro'",
      "",
      "export default function $1Page() {",
      "  return <>",
      "    $1",
      "  </>",
      "}"
    ]
  },
  "React Function Component (twin.macro)": {
    "scope": "typescriptreact",
    "prefix": "Function Component",
    "body": [
      "import { FC } from 'react'",
      "import 'twin.macro'",
      "",
      "export const $1: FC = () => {",
      "  return <>",
      "    $1",
      "  </>",
      "}"
    ]
  },
  "React Function Component with Props Interface (twin.macro)": {
    "scope": "typescriptreact",
    "prefix": "Function Component with Props Interface",
    "body": [
      "import { FC } from 'react'",
      "import 'twin.macro'",
      "",
      "export interface $1Props {}",
      "export const $1: FC<$1Props> = () => {",
      "  return <>",
      "    $1",
      "  </>",
      "}"
    ]
  },
  "React Function Component with Props Interface & Children (twin.macro)": {
    "scope": "typescriptreact",
    "prefix": "Function Component with Props Interface",
    "body": [
      "import { FC, PropsWithChildren } from 'react'",
      "import 'twin.macro'",
      "",
      "export interface $1Props extends PropsWithChildren {}",
      "export const $1: FC<$1Props> = ({ children }) => {",
      "  return <>$0{children}</>",
      "}"
    ]
  },
  "React Inline Function Component": {
    "scope": "typescriptreact",
    "prefix": "Inline Function Component",
    "body": ["const $1: FC$0 = () => <>", "  $1", "</>"]
  },
  "React Inline Function Component with Props": {
    "scope": "typescriptreact",
    "prefix": "Inline Function Component with Props",
    "body": ["const $1Props = { }", "const $1: FC$0<$1Props> = ({}) => <>", "  $1", "</>"]
  },
  "CSS JSX-Attribute (twin.macro)": {
    "scope": "typescriptreact",
    "prefix": "css jsx attribute (twin)",
    "body": ["css={[tw$0``]}"]
  }
}