feat: nft background

apps/extension_app/src/App.css

@@ -6,6 +6,7 @@ html
 
 body{
 	background: linear-gradient(to left, #8360c3, #2ebf91);
+
 }
 
 .App {
@@ -15,8 +16,8 @@ body{
 .container {
     width: 100%;
     padding: 3%;
-	background: linear-gradient(to left, #8360c3, #2ebf91);
 	min-height: 400px;
+	background-image: url(https://cdn.streamelements.com/static/user/background_default.jpg)
 }
 
 

apps/web/src/components/nftSaleItem.tsx

@@ -5,15 +5,15 @@ import React from "react"
 export function NftSaleItem(props:nftCreate){
 
     return (
-        <div >
+        <div>
             <div className="card" style={{"background": "rgba(40, 2, 84, 0.7)"}} onClick={() => {
 
             }}>
                 <h4>ID: {props.nftId}</h4>
                 <h4>Price: {props.price}</h4>
                 <h4>Creator: {formatAddress(props.creator)}</h4>
                 <div className="shine"></div>
-                <div className="background">
+                <div className="background" style={{"backgroundImage": `url(${props.url})`}}>
                     <div className="tiles">
                         <div className="tile tile-1"></div>
                         <div className="tile tile-2"></div>

apps/web/src/index.css

@@ -4,6 +4,7 @@
 @tailwind components;
 @tailwind utilities;
 
+
 :root {
   --black-gradient: linear-gradient(
     144.39deg,

apps/web/src/models/model.ts

@@ -32,6 +32,7 @@ export type nftCreate = {
     price: number
     maxSupply: number
     eventId: number
+    url: string
 }
 
 export type account = {

apps/web/src/routes/donation.tsx

@@ -123,7 +123,7 @@ export default function Donation() {
             {nftToSale.map((item:any) => {
               return (
                 <div className="row-span-3  rounded-sm">
-                  <NftSaleItem eventId={item.eventId} nftId={item.nftId} creator={item.creator} price={item.price}  nftName={item.nftName} maxSupply={item.maxSupply} />
+                  <NftSaleItem eventId={item.eventId} nftId={item.nftId} creator={item.creator} price={item.price}  nftName={item.nftName} maxSupply={item.maxSupply} url={channelInfo?channelInfo.avatar:""} />
                 </div>
               )
             })}