tsx-shadcn-ui-ui-add-attribute

A painting is a person's account of this edit as text, recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.

Before…lines 1–41 unchanged (41 lines)
        Contributors <Badge variant="secondary">312</Badge>
      </CardTitle>
    </CardHeader>
    <CardContent>
      <div className="flex flex-wrap gap-2">
        {usernames.map((username) => (
          <Avatar key={username}>
            <AvatarImage
              src={`https://github.com/${username}.png`}
              alt={username}
            />
            <AvatarFallback>{username.charAt(0)}</AvatarFallback>
          </Avatar>
…lines 55–66 unchanged (12 lines)

After…lines 1–41 unchanged (41 lines)
        Contributors <Badge variant="secondary">312</Badge>
      </CardTitle>
    </CardHeader>
    <CardContent>
      <div className="flex flex-wrap gap-2">
        {usernames.map((username) => (
          <Avatar key={username} className="grayscale">
            <AvatarImage
              src={`https://github.com/${username}.png`}
              alt={username}
            />
            <AvatarFallback>{username.charAt(0)}</AvatarFallback>
          </Avatar>
…lines 55–66 unchanged (12 lines)

Before…lines 1–41 unchanged (41 lines)
        Contributors <Badge variant="secondary">312</Badge>
      </CardTitle>
    </CardHeader>
    <CardContent>
      <div className="flex flex-wrap gap-2">
        {usernames.map((username) => (
          <Avatar key={username}>
            <AvatarImage
              src={`https://github.com/${username}.png`}
              alt={username}
            />
            <AvatarFallback>{username.charAt(0)}</AvatarFallback>
          </Avatar>
…lines 55–66 unchanged (12 lines)

After…lines 1–41 unchanged (41 lines)
        Contributors <Badge variant="secondary">312</Badge>
      </CardTitle>
    </CardHeader>
    <CardContent>
      <div className="flex flex-wrap gap-2">
        {usernames.map((username) => (
          <Avatar key={username} className="grayscale">
            <AvatarImage
              src={`https://github.com/${username}.png`}
              alt={username}
            />
            <AvatarFallback>{username.charAt(0)}</AvatarFallback>
          </Avatar>
…lines 55–66 unchanged (12 lines)

Before…lines 1–41 unchanged (41 lines)
        Contributors <Badge variant="secondary">312</Badge>
      </CardTitle>
    </CardHeader>
    <CardContent>
      <div className="flex flex-wrap gap-2">
        {usernames.map((username) => (
          <Avatar key={username}>
            <AvatarImage
              src={`https://github.com/${username}.png`}
              alt={username}
            />
            <AvatarFallback>{username.charAt(0)}</AvatarFallback>
          </Avatar>
…lines 55–66 unchanged (12 lines)

After…lines 1–41 unchanged (41 lines)
        Contributors <Badge variant="secondary">312</Badge>
      </CardTitle>
    </CardHeader>
    <CardContent>
      <div className="flex flex-wrap gap-2">
        {usernames.map((username) => (
          <Avatar key={username} className="grayscale">
            <AvatarImage
              src={`https://github.com/${username}.png`}
              alt={username}
            />
            <AvatarFallback>{username.charAt(0)}</AvatarFallback>
          </Avatar>
…lines 55–66 unchanged (12 lines)

Before

program

expression_statement

string

" "\""

string_fragment "use client"

" "\""

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "Avatar"

, ","

import_specifier

identifier "AvatarFallback"

, ","

import_specifier

identifier "AvatarImage"

, ","

} "}"

from "from"

string

" "\""

string_fragment "@/registry/bases/base/ui/avatar"

" "\""

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "Badge"

} "}"

from "from"

string

" "\""

string_fragment "@/registry/bases/base/ui/badge"

" "\""

import_statement (+26 nodes collapsed)

comment "// GitHub usernames displayed as contributor avatars."

lexical_declaration (+88 nodes collapsed)

export_statement

export "export"

function_declaration

function "function"

identifier "Contributors"

formal_parameters

( "("

) ")"

statement_block

{ "{"

return_statement

return "return"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "Card"

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "max-w-sm"

" "\""

> ">"

jsx_element (+36 nodes collapsed)

jsx_element

jsx_opening_element

< "<"

identifier "CardContent"

> ">"

jsx_element

jsx_opening_element

< "<"

identifier "div"

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "flex flex-wrap gap-2"

" "\""

> ">"

jsx_expression

{ "{"

call_expression

member_expression

identifier "usernames"

. "."

property_identifier "map"

arguments

( "("

arrow_function

formal_parameters

( "("

required_parameter

identifier "username"

) ")"

=> "=>"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "Avatar"

jsx_attribute

property_identifier "key"

= "="

jsx_expression

{ "{"

identifier "username"

} "}"

> ">"

jsx_self_closing_element (+26 nodes collapsed)

jsx_element (+21 nodes collapsed)

jsx_closing_element

</ "</"

identifier "Avatar"

> ">"

) ")"

} "}"

jsx_closing_element

</ "</"

identifier "div"

> ">"

jsx_closing_element

</ "</"

identifier "CardContent"

> ">"

jsx_element (+33 nodes collapsed)

jsx_closing_element

</ "</"

identifier "Card"

> ">"

) ")"

} "}"

After

program

expression_statement

string

" "\""

string_fragment "use client"

" "\""

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "Avatar"

, ","

import_specifier

identifier "AvatarFallback"

, ","

import_specifier

identifier "AvatarImage"

, ","

} "}"

from "from"

string

" "\""

string_fragment "@/registry/bases/base/ui/avatar"

" "\""

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "Badge"

} "}"

from "from"

string

" "\""

string_fragment "@/registry/bases/base/ui/badge"

" "\""

import_statement (+26 nodes collapsed)

comment "// GitHub usernames displayed as contributor avatars."

lexical_declaration (+88 nodes collapsed)

export_statement

export "export"

function_declaration

function "function"

identifier "Contributors"

formal_parameters

( "("

) ")"

statement_block

{ "{"

return_statement

return "return"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "Card"

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "max-w-sm"

" "\""

> ">"

jsx_element (+36 nodes collapsed)

jsx_element

jsx_opening_element

< "<"

identifier "CardContent"

> ">"

jsx_element

jsx_opening_element

< "<"

identifier "div"

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "flex flex-wrap gap-2"

" "\""

> ">"

jsx_expression

{ "{"

call_expression

member_expression

identifier "usernames"

. "."

property_identifier "map"

arguments

( "("

arrow_function

formal_parameters

( "("

required_parameter

identifier "username"

) ")"

=> "=>"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "Avatar"

jsx_attribute

property_identifier "key"

= "="

jsx_expression

{ "{"

identifier "username"

} "}"

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "grayscale"

" "\""

> ">"

jsx_self_closing_element (+26 nodes collapsed)

jsx_element (+21 nodes collapsed)

jsx_closing_element

</ "</"

identifier "Avatar"

> ">"

) ")"

} "}"

jsx_closing_element

</ "</"

identifier "div"

> ">"

jsx_closing_element

</ "</"

identifier "CardContent"

> ">"

jsx_element (+33 nodes collapsed)

jsx_closing_element

</ "</"

identifier "Card"

> ">"

) ")"

} "}"