Skip to content

Instantly share code, notes, and snippets.

@Daltonic

Daltonic/Artworks.jsx Secret

Created April 3, 2022 12:13
Download ZIP

Revisions

  1. Daltonic created this gist Apr 3, 2022.
    67 changes: 67 additions & 0 deletions Artworks.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    import ethlogo from '../assets/ethlogo.png'
    import { useGlobalState } from '../store'
    import { BASE_URI } from '../Adulam'

    const Artworks = () => {
    const [nfts] = useGlobalState('nfts')

    const trucncate = (str, num = 20) => {
    if (str.length > num) {
    return str.slice(0, num) + "..."
    } else {
    return str
    }
    }

    return (
    <div className="bg-[#131835] py-10">
    <div className="w-4/5 mx-auto">
    <h4 className="text-gradient uppercase text-2xl">Artworks</h4>

    <div className="flex flex-wrap justify-start items-center mt-4">
    {nfts.map((nft) => (
    <div
    key={nft.id}
    className={`relative shadow-xl shadow-black p-3
    bg-white rounded-lg item w-64 h-64 object-contain
    bg-[url(${BASE_URI + nft.id}.webp)]
    bg-no-repeat bg-cover overflow-hidden mr-2 mb-2 cursor-pointer
    transition-all duration-75 delay-100 hover:shadow-[#bd255f]`}
    style={{backgroundImage: `url(${BASE_URI + nft.id}.webp)`}}
    >
    <div
    className="absolute bottom-0 left-0 right-0
    flex flex-row justify-between items-center
    label-gradient p-2 w-full text-white text-sm"
    >
    <p>
    {nft.id}# {trucncate(nft.title)}
    </p>
    <div className="flex justify-center items-center space-x-2">
    <img
    className="w-5 cursor-pointer"
    src={ethlogo}
    alt="Adulam Logo"
    />
    {nft.cost}
    </div>
    </div>
    </div>
    ))}
    </div>

    <div className="flex flex-row justify-center items-center mx-auto mt-4">
    <button
    className="shadow-xl shadow-black text-white
    bg-[#e32970] hover:bg-[#bd255f] p-2
    rounded-full cursor-pointer my-4"
    >
    Load more
    </button>
    </div>
    </div>
    </div>
    )
    }

    export default Artworks