Skip to content

Instantly share code, notes, and snippets.

@ryanditjia

ryanditjia/react.jsx

Created March 10, 2025 08:36
Show Gist options
  • Save ryanditjia/bc1e3f98dea157c8013da217e2f80aeb to your computer and use it in GitHub Desktop.
Save ryanditjia/bc1e3f98dea157c8013da217e2f80aeb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ryanditjia created this gist Mar 10, 2025.
    80 changes: 80 additions & 0 deletions react.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,80 @@
    import React from 'react'

    const Component = () => <Popup text="You Win" items={[]} />

    const Component2 = () => (
    <GenericPopup>
    {/* <WinComponent items={[]} /> */}
    <LoseComponent items={[]} />
    </GenericPopup>
    )

    const ItemLayout = ({ name, description, imageArea, children }) => (
    <div>
    <div>
    <h2>{name}</h2>
    <p>{description}</p>
    </div>

    {imageArea}

    {children}
    </div>
    )

    const ShopSelectedItem = ({ onBuy }) => (
    <ItemLayout name="Shop Item" description="This is a shop item" imageArea={<ShopImage />}>
    <button onClick={onBuy}>Buy</button>
    </ItemLayout>
    )

    const InventorySelectedItem = ({ onUse, onDrop }) => (
    <ItemLayout
    name="Inventory Item"
    description="This is an inventory item"
    imageArea={<InventoryImage />}
    >
    <button onClick={onUse}>Use</button>
    <button onClick={onDrop}>Drop</button>
    </ItemLayout>
    )

    const SkewedImage = () => <img style={{ transform: 'skew(10deg)' }} />

    const ShopImage = ({ price }) => (
    <div>
    <SkewedImage />

    <div
    style={{
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'white',
    padding: '10px',
    }}
    >
    {price}
    </div>
    </div>
    )

    const InventoryImage = ({ quantity }) => (
    <div>
    <SkewedImage />

    <div
    style={{
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'white',
    padding: '10px',
    }}
    >
    {quantity}
    </div>
    </div>
    )