-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c246be6
commit 6daf791
Showing
16 changed files
with
353 additions
and
299 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,117 +1,140 @@ | ||
import { Disclosure,} from '@headlessui/react' | ||
import { Disclosure } from "@headlessui/react"; | ||
|
||
import TileImage from './TileImage'; | ||
import { openseaLink, formatPrice } from '../utils/misc'; | ||
import TileImage from "./TileImage"; | ||
import { openseaLink, formatPrice } from "../utils/misc"; | ||
|
||
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/outline' | ||
import {TileAsset} from "../types/TileAsset"; | ||
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/outline"; | ||
import { PixelMapTile } from "@pixelmap/common/types/PixelMapTile"; | ||
|
||
type Props = { | ||
tile: TileAsset; | ||
tile: PixelMapTile; | ||
index: number; | ||
handleImageEditor; | ||
handleLinkChange; | ||
handlePriceChange; | ||
handleSave; | ||
} | ||
}; | ||
|
||
function EditTile({tile, index, handleImageEditor, handleLinkChange, handlePriceChange, handleSave}: Props) { | ||
function EditTile({ | ||
tile, | ||
index, | ||
handleImageEditor, | ||
handleLinkChange, | ||
handlePriceChange, | ||
handleSave, | ||
}: Props) { | ||
return ( | ||
<Disclosure key={tile.id}> | ||
{({ open }) => ( | ||
<div className="mb-3"> | ||
<Disclosure.Button | ||
className={`flex items-center py-3 px-4 bg-white w-full text-left font-medium nes-container nes-pointer ${open ? 'border-b-0' : ''}`}> | ||
|
||
<Disclosure.Button | ||
className={`flex items-center py-3 px-4 bg-white w-full text-left font-medium nes-container nes-pointer ${ | ||
open ? "border-b-0" : "" | ||
}`} | ||
> | ||
<div className="bg-gray-200 h-6 w-6 mr-3"> | ||
<TileImage image={tile.image} className="h-full w-full" /> | ||
</div> | ||
|
||
<span>Tile #{tile.id}</span> | ||
|
||
<div className="ml-auto"> | ||
{ open && | ||
<ChevronUpIcon className="h-4 w-4 text-gray-400" /> | ||
} | ||
{open && <ChevronUpIcon className="h-4 w-4 text-gray-400" />} | ||
|
||
{ !open && | ||
<ChevronDownIcon className="h-4 w-4 text-gray-400"/> | ||
} | ||
{!open && <ChevronDownIcon className="h-4 w-4 text-gray-400" />} | ||
</div> | ||
</Disclosure.Button> | ||
|
||
<Disclosure.Panel className="bg-white py-6 px-8 nes-container"> | ||
<> | ||
<div className="flex justify-between space-x-12"> | ||
<div className="bg-gray-200 h-48 w-48"> | ||
<button onClick={() => handleImageEditor(tile)} className="block group relative nes-pointer"> | ||
<div className="z-10 absolute inset-0 bg-gray-900 bg-opacity-70 opacity-0 group-hover:opacity-100 flex items-center justify-center"> | ||
<span className="text-white">Change image</span> | ||
</div> | ||
<TileImage image={tile.image} className="h-48 w-48 z-10" /> | ||
</button> | ||
</div> | ||
<div className="flex flex-col w-full"> | ||
<div className="mb-3 nes-field"> | ||
<label htmlFor="link" className="block text-sm font-medium text-gray-700"> | ||
Link | ||
</label> | ||
<input | ||
type="text" | ||
name="link" | ||
id="link" | ||
className="mt-1 nes-input" | ||
value={tile.url} | ||
onChange={(e) => handleLinkChange(e.target.value, index)} | ||
/> | ||
<button | ||
onClick={() => handleImageEditor(tile)} | ||
className="block group relative nes-pointer" | ||
> | ||
<div className="z-10 absolute inset-0 bg-gray-900 bg-opacity-70 opacity-0 group-hover:opacity-100 flex items-center justify-center"> | ||
<span className="text-white">Change image</span> | ||
</div> | ||
<TileImage image={tile.image} className="h-48 w-48 z-10" /> | ||
</button> | ||
</div> | ||
|
||
{ !tile.wrapped && | ||
<div className="flex flex-col w-full"> | ||
<div className="mb-3 nes-field"> | ||
<label htmlFor="price" className="block text-sm font-medium text-gray-700"> | ||
Price | ||
<label | ||
htmlFor="link" | ||
className="block text-sm font-medium text-gray-700" | ||
> | ||
Link | ||
</label> | ||
<div className="mt-1 relative"> | ||
<input | ||
type="text" | ||
name="price" | ||
id="price" | ||
className="nes-input pr-16" | ||
value={tile.newPrice} | ||
onChange={(e) => handlePriceChange(e.target.value, index)} | ||
/> | ||
<span className="absolute right-0 top-0 w-16 h-full text-center flex items-center justify-center text-sm"> | ||
ETH | ||
</span> | ||
</div> | ||
<input | ||
type="text" | ||
name="link" | ||
id="link" | ||
className="mt-1 nes-input" | ||
value={tile.url} | ||
onChange={(e) => handleLinkChange(e.target.value, index)} | ||
/> | ||
</div> | ||
} | ||
|
||
{ tile.wrapped && | ||
<div className="mb-3"> | ||
<p className=""> | ||
Price: {formatPrice(tile)} | ||
</p> | ||
<span className="text-sm text-gray-600">Set the price on <a className="text-blue-500 underline" href={openseaLink(tile.id)} target="_blank" rel="noreferrer">OpenSea</a></span> | ||
</div> | ||
} | ||
{!tile.wrapped && ( | ||
<div className="mb-3 nes-field"> | ||
<label | ||
htmlFor="price" | ||
className="block text-sm font-medium text-gray-700" | ||
> | ||
Price | ||
</label> | ||
<div className="mt-1 relative"> | ||
<input | ||
type="text" | ||
name="price" | ||
id="price" | ||
className="nes-input pr-16" | ||
value={tile.newPrice} | ||
onChange={(e) => | ||
handlePriceChange(e.target.value, index) | ||
} | ||
/> | ||
<span className="absolute right-0 top-0 w-16 h-full text-center flex items-center justify-center text-sm"> | ||
ETH | ||
</span> | ||
</div> | ||
</div> | ||
)} | ||
|
||
</div> | ||
{tile.wrapped && ( | ||
<div className="mb-3"> | ||
<p className="">Price: {formatPrice(tile)}</p> | ||
<span className="text-sm text-gray-600"> | ||
Set the price on{" "} | ||
<a | ||
className="text-blue-500 underline" | ||
href={openseaLink(tile.id)} | ||
target="_blank" | ||
rel="noreferrer" | ||
> | ||
OpenSea | ||
</a> | ||
</span> | ||
</div> | ||
)} | ||
</div> | ||
</div> | ||
<div className="flex justify-end mt-2"> | ||
<button | ||
className="mt-3 ml-auto nes-btn is-primary transition duration-150 font-medium" | ||
onClick={() => handleSave(tile)} | ||
> | ||
Save changes | ||
</button> | ||
className="mt-3 ml-auto nes-btn is-primary transition duration-150 font-medium" | ||
onClick={() => handleSave(tile)} | ||
> | ||
Save changes | ||
</button> | ||
</div> | ||
</> | ||
</Disclosure.Panel> | ||
</div> | ||
)} | ||
</Disclosure> | ||
) | ||
); | ||
} | ||
|
||
export default EditTile; | ||
export default EditTile; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,34 +1,32 @@ | ||
import React, { useState } from "react"; | ||
|
||
import { TileAsset } from '../types/TileAsset'; | ||
import TilePopover from "./TilePopover"; | ||
import { PixelMapTile } from "@pixelmap/common/types/PixelMapTile"; | ||
|
||
import TilePopover from './TilePopover'; | ||
|
||
function MapTiles({tiles}) { | ||
let [currentTile, setCurrentTile] = useState<TileAsset | null>(); | ||
let [tileElement, setTileElement] = useState<HTMLButtonElement | null>() | ||
function MapTiles({ tiles }) { | ||
let [currentTile, setCurrentTile] = useState<PixelMapTile | null>(); | ||
let [tileElement, setTileElement] = useState<HTMLButtonElement | null>(); | ||
|
||
const handleClick = (tileIndex: number, ref: HTMLButtonElement) => { | ||
setCurrentTile(tiles[tileIndex]); | ||
setTileElement(ref); | ||
} | ||
}; | ||
|
||
return ( | ||
<> | ||
{ tiles.map( (tile: TileAsset, idx: number) => ( | ||
<button | ||
key={idx} | ||
{tiles.map((tile: PixelMapTile, idx: number) => ( | ||
<button | ||
key={idx} | ||
onClick={(e) => { | ||
handleClick(idx, e.currentTarget) | ||
}} | ||
className="block nes-pointer w-4 h-4 ring-green-600 hover:ring hover:bg-green-500 hover:bg-opacity-40 hover:ring-opacity-100"> | ||
|
||
</button> | ||
handleClick(idx, e.currentTarget); | ||
}} | ||
className="block nes-pointer w-4 h-4 ring-green-600 hover:ring hover:bg-green-500 hover:bg-opacity-40 hover:ring-opacity-100" | ||
></button> | ||
))} | ||
|
||
<TilePopover tile={currentTile} referenceElement={tileElement} /> | ||
</> | ||
); | ||
} | ||
|
||
export default React.memo(MapTiles); | ||
export default React.memo(MapTiles); |
Oops, something went wrong.