updated market place ui
This commit is contained in:
Nalvazhuthi
95
app/src/modules/market/AssetPreview.tsx
Normal file
95
app/src/modules/market/AssetPreview.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import React from "react";
|
||||
import assetImage from "../../assets/image/image.png";
|
||||
import { FiileedStarsIconSmall } from "../../components/icons/marketPlaceIcons";
|
||||
|
||||
// Define the shape of the selected card
|
||||
interface SelectedCard {
|
||||
assetName: string;
|
||||
uploadedOn: string;
|
||||
price: number;
|
||||
rating: number;
|
||||
views: number;
|
||||
}
|
||||
|
||||
// Define the props type for AssetPreview
|
||||
interface AssetPreviewProps {
|
||||
selectedCard: SelectedCard;
|
||||
setSelectedCard: React.Dispatch<React.SetStateAction<SelectedCard | null>>; // Type for setter function
|
||||
}
|
||||
|
||||
const AssetPreview: React.FC<AssetPreviewProps> = ({
|
||||
selectedCard,
|
||||
setSelectedCard,
|
||||
}) => {
|
||||
// Ensure rating is a valid number between 0 and 5
|
||||
const rating = Math.max(
|
||||
0,
|
||||
Math.min(5, isNaN(selectedCard.rating) ? 0 : selectedCard.rating)
|
||||
);
|
||||
|
||||
console.log("selectedCard: ", selectedCard);
|
||||
|
||||
// Ensure that the rating is a valid positive integer for array length
|
||||
const starsArray = Array.from({ length: rating }, (_, index) => index);
|
||||
|
||||
return (
|
||||
<div className="assetPreview-wrapper">
|
||||
<div className="assetPreview">
|
||||
<div className="image-preview">
|
||||
<img src={assetImage} alt="" />
|
||||
</div>
|
||||
|
||||
<div className="asset-details-preview">
|
||||
<div className="organization">
|
||||
<div className="image">H</div>
|
||||
<div className="organization-details">
|
||||
<div className="organization-name">HERX FACTORY</div>
|
||||
<div className="follow">Follow +</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* asset details */}
|
||||
<div className="asset-details">
|
||||
<div className="asset-name">{selectedCard.assetName}</div>
|
||||
<div className="asset-description">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
Doloremque nisi beatae facilis architecto quaerat delectus velit
|
||||
aliquid assumenda cumque vitae! Tempore quibusdam ab natus in
|
||||
minima voluptates, aliquid corrupti excepturi consectetur
|
||||
distinctio sequi beatae odit autem? Distinctio ab, voluptatem
|
||||
omnis quibusdam, incidunt eum ipsa aliquid enim eaque eveniet nisi
|
||||
autem, accusantium vel! Laborum in iste voluptates ad! Harum eum
|
||||
amet pariatur fugit laudantium dolorem maxime voluptates atque
|
||||
molestiae modi inventore quidem maiores dolore numquam, natus
|
||||
quisquam optio distinctio eveniet aliquam, aut eligendi laboriosam
|
||||
eaque! Porro cumque cum distinctio ullam debitis, dolorum
|
||||
similique! Harum cupiditate perferendis voluptatum molestiae,
|
||||
fugiat quisquam assumenda!
|
||||
</div>
|
||||
<div className="asset-review">
|
||||
<div className="asset-rating">
|
||||
<FiileedStarsIconSmall />
|
||||
{selectedCard.rating}
|
||||
</div>
|
||||
<div className="asset-view">{selectedCard.views} views</div>
|
||||
</div>
|
||||
<div className="asset-price">₹ {selectedCard.price}</div>
|
||||
</div>
|
||||
|
||||
{/* buttons */}
|
||||
<div className="button-container">
|
||||
<div className="button">Add to cart</div>
|
||||
<div className="button">Buy now</div>
|
||||
</div>
|
||||
|
||||
{/* close button */}
|
||||
<div className="closeButton" onClick={() => setSelectedCard(null)}>
|
||||
{`<-back`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AssetPreview;
|
||||
@@ -1,3 +1,4 @@
|
||||
// Card.tsx
|
||||
import React from "react";
|
||||
import {
|
||||
CommentsIcon,
|
||||
@@ -8,24 +9,51 @@ import {
|
||||
} from "../../components/icons/marketPlaceIcons";
|
||||
|
||||
import assetImage from "../../assets/image/image.png";
|
||||
const Card: React.FC = () => {
|
||||
|
||||
interface CardProps {
|
||||
assetName: string;
|
||||
uploadedOn: string;
|
||||
price: number;
|
||||
rating: number;
|
||||
views: number;
|
||||
onSelectCard: (cardData: {
|
||||
assetName: string;
|
||||
uploadedOn: string;
|
||||
price: number;
|
||||
rating: number;
|
||||
views: number;
|
||||
}) => void;
|
||||
}
|
||||
|
||||
const Card: React.FC<CardProps> = ({
|
||||
assetName,
|
||||
uploadedOn,
|
||||
price,
|
||||
rating,
|
||||
views,
|
||||
onSelectCard,
|
||||
}) => {
|
||||
const handleCardSelect = () => {
|
||||
onSelectCard({ assetName, uploadedOn, price, rating, views });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card-container">
|
||||
<div className="icon">
|
||||
<DownloadIcon />
|
||||
</div>
|
||||
<div className="image-container">
|
||||
<img src={assetImage} alt="" />
|
||||
<img src={assetImage} alt={assetName} />
|
||||
</div>
|
||||
<div className="assets-container">
|
||||
<div className="name-container">
|
||||
<div className="asstes-container">Asset name</div>
|
||||
<div className="assets-date">Uploaded on-12 Jan 23</div>
|
||||
<div className="assets-name">{assetName}</div>
|
||||
<div className="assets-date">{uploadedOn}</div>
|
||||
</div>
|
||||
<div className="details">
|
||||
<div className="content">
|
||||
<EyeIconBig />
|
||||
1.5k
|
||||
{views}
|
||||
</div>
|
||||
<div className="content">
|
||||
<CommentsIcon />
|
||||
@@ -39,17 +67,17 @@ const Card: React.FC = () => {
|
||||
</div>
|
||||
<div className="stars-container">
|
||||
<div className="stars-wrapper">
|
||||
<StarsIconSmall />
|
||||
<StarsIconSmall />
|
||||
<StarsIconSmall />
|
||||
<StarsIconSmall />
|
||||
<StarsIconSmall />
|
||||
{[...Array(5)].map((_, index) => (
|
||||
<StarsIconSmall key={index} />
|
||||
))}
|
||||
</div>
|
||||
<div className="units">
|
||||
₹ 36,500/<span>unit</span>
|
||||
₹ {price}/<span>unit</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="buy-now-button">Buy now</div>
|
||||
<div className="buy-now-button" onClick={handleCardSelect}>
|
||||
Buy now
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,18 +1,152 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import Card from "./Card";
|
||||
import AssetPreview from "./AssetPreview";
|
||||
import RenderOverlay from "../../components/templates/Overlay";
|
||||
|
||||
const CardsContainer: React.FC = () => {
|
||||
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
||||
const array = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Asset 1",
|
||||
uploadedOn: "12 Jan 23",
|
||||
price: 36500,
|
||||
rating: 4.5,
|
||||
views: 500,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Asset 2",
|
||||
uploadedOn: "14 Jan 23",
|
||||
price: 45000,
|
||||
rating: 4.0,
|
||||
views: 500,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Asset 3",
|
||||
uploadedOn: "15 Jan 23",
|
||||
price: 52000,
|
||||
rating: 4.8,
|
||||
views: 500,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Asset 4",
|
||||
uploadedOn: "18 Jan 23",
|
||||
price: 37000,
|
||||
rating: 3.9,
|
||||
views: 500,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Asset 5",
|
||||
uploadedOn: "20 Jan 23",
|
||||
price: 60000,
|
||||
rating: 5.0,
|
||||
views: 500,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Asset 6",
|
||||
uploadedOn: "22 Jan 23",
|
||||
price: 46000,
|
||||
rating: 4.2,
|
||||
views: 500,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "Asset 7",
|
||||
uploadedOn: "25 Jan 23",
|
||||
price: 38000,
|
||||
rating: 4.3,
|
||||
views: 500,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "Asset 8",
|
||||
uploadedOn: "27 Jan 23",
|
||||
price: 41000,
|
||||
rating: 4.1,
|
||||
views: 500,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "Asset 9",
|
||||
uploadedOn: "30 Jan 23",
|
||||
price: 55000,
|
||||
rating: 4.6,
|
||||
views: 500,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: "Asset 10",
|
||||
uploadedOn: "2 Feb 23",
|
||||
price: 49000,
|
||||
rating: 4.4,
|
||||
views: 500,
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: "Asset 11",
|
||||
uploadedOn: "5 Feb 23",
|
||||
price: 62000,
|
||||
rating: 5.0,
|
||||
views: 500,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: "Asset 12",
|
||||
uploadedOn: "7 Feb 23",
|
||||
price: 53000,
|
||||
rating: 4.7,
|
||||
views: 500,
|
||||
},
|
||||
];
|
||||
|
||||
const [selectedCard, setSelectedCard] = useState<{
|
||||
assetName: string;
|
||||
uploadedOn: string;
|
||||
price: number;
|
||||
rating: number;
|
||||
views: number;
|
||||
} | null>(null);
|
||||
|
||||
const handleCardSelect = (cardData: {
|
||||
assetName: string;
|
||||
uploadedOn: string;
|
||||
price: number;
|
||||
rating: number;
|
||||
views: number;
|
||||
}) => {
|
||||
setSelectedCard(cardData);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="cards-container-container">
|
||||
<div className="header">Products You May Like</div>
|
||||
<div className="cards-wrapper-container">
|
||||
{array.map((index) => (
|
||||
<Card key={index} />
|
||||
{array.map((asset) => (
|
||||
<Card
|
||||
key={asset.id}
|
||||
assetName={asset.name}
|
||||
uploadedOn={asset.uploadedOn}
|
||||
price={asset.price}
|
||||
rating={asset.rating}
|
||||
views={asset.views}
|
||||
onSelectCard={handleCardSelect}
|
||||
/>
|
||||
))}
|
||||
{/* <RenderOverlay> */}
|
||||
{selectedCard && (
|
||||
<AssetPreview
|
||||
selectedCard={selectedCard}
|
||||
setSelectedCard={setSelectedCard}
|
||||
/>
|
||||
)}
|
||||
{/* </RenderOverlay> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardsContainer;
|
||||
export default CardsContainer;
|
||||
|
||||
@@ -16,7 +16,7 @@ const FilterSearch: React.FC = () => {
|
||||
<Search onChange={() => {}} />
|
||||
<RegularDropDown
|
||||
header={activeOption}
|
||||
options={["Alphabet ascending", "Alphabet descending", ""]}
|
||||
options={["Alphabet ascending", "Alphabet descending"]}
|
||||
onSelect={handleSelect}
|
||||
search={false}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user