Skip to content

Commit 3b31aaf

Browse files
lazhenyilazhenyi
committed
feat(marketplace): add mock data
1 parent bbaccce commit 3b31aaf

File tree

7 files changed

+244
-3
lines changed

7 files changed

+244
-3
lines changed

‎public/images/marketplace/gitdataai.png

56.4 KB
Loading

‎src/app/(default)/marketplace/data.tsx

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
export const marketplace_data:MarketplaceData[] = [
2+
{
3+
name: "GitDataAI",
4+
description: "GitDataAI is a platform that allows you to easily access and analyze your GitHub data.",
5+
image: "/images/marketplace/gitdataai.png",
6+
link: "https://gitdataai.com",
7+
tags: ["GitHub", "Data", "Analysis", "AI"],
8+
price: "Free",
9+
category: "AI",
10+
type: "App",
11+
owner: "GitDataAI",
12+
owner_image: "/images/marketplace/gitdataai.png"
13+
},
14+
{
15+
name: "GitDataAI",
16+
description: "GitDataAI is a platform that allows you to easily access and analyze your GitHub data.",
17+
image: "/images/marketplace/gitdataai.png",
18+
link: "https://gitdataai.com",
19+
tags: ["GitHub", "Data", "Analysis", "AI"],
20+
price: "Free",
21+
category: "AI",
22+
type: "App",
23+
owner: "GitDataAI",
24+
owner_image: "/images/marketplace/gitdataai.png"
25+
},
26+
{
27+
name: "GitDataAI",
28+
description: "GitDataAI is a platform that allows you to easily access and analyze your GitHub data.",
29+
image: "/images/marketplace/gitdataai.png",
30+
link: "https://gitdataai.com",
31+
tags: ["GitHub", "Data", "Analysis", "AI"],
32+
price: "Free",
33+
category: "AI",
34+
type: "App",
35+
owner: "GitDataAI",
36+
owner_image: "/images/marketplace/gitdataai.png"
37+
},
38+
{
39+
name: "GitDataAI",
40+
description: "GitDataAI is a platform that allows you to easily access and analyze your GitHub data.",
41+
image: "/images/marketplace/gitdataai.png",
42+
link: "https://gitdataai.com",
43+
tags: ["GitHub", "Data", "Analysis", "AI"],
44+
price: "Free",
45+
category: "AI",
46+
type: "App",
47+
owner: "GitDataAI",
48+
owner_image: "/images/marketplace/gitdataai.png"
49+
}
50+
]
51+
52+
export interface MarketplaceData {
53+
name: string;
54+
description: string;
55+
image: string;
56+
link: string;
57+
tags: string[];
58+
price: string;
59+
category: string;
60+
type: string;
61+
owner: string;
62+
owner_image: string;
63+
}

‎src/app/(default)/marketplace/page.tsx

+22-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,27 @@
1+
'use client'
2+
3+
import {MarketTitle} from "@/component/market/marketTitle";
4+
import {useEffect, useState} from "react";
5+
import {marketplace_data, MarketplaceData} from "@/app/(default)/marketplace/data";
6+
import {MarketItem} from "@/component/market/marketItem";
7+
18
export default function MarketPlacePage(){
9+
const [ItemData,setItemData] = useState<MarketplaceData[]>([])
10+
useEffect(() => {
11+
setItemData(marketplace_data)
12+
}, []);
213
return (
3-
<div>
4-
MarketPlace
14+
<div className="market">
15+
<MarketTitle/>
16+
<div className="market-display">
17+
{
18+
ItemData.map((item,index) => {
19+
return (
20+
<MarketItem key={index} data={item}/>
21+
)
22+
})
23+
}
24+
</div>
525
</div>
626
)
727
}

‎src/component/market/marketItem.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import {MarketplaceData} from "@/app/(default)/marketplace/data";
2+
3+
export interface MarketItemProps {
4+
data: MarketplaceData;
5+
}
6+
7+
8+
export const MarketItem = ({data}: MarketItemProps) => {
9+
return (
10+
<div className="market-item">
11+
12+
<div className="market-item-image">
13+
<div style={{
14+
display: "flex",
15+
gap: "1rem"
16+
}}>
17+
<img src={data.image} alt={data.name}/>
18+
<span>{data.name}</span>
19+
</div>
20+
<span className="price">{data.price}</span>
21+
</div>
22+
<div className="market-item-info">
23+
<p>{data.description.substring(0,50)} {data.description.length > 50 ? "..." : ""}</p>
24+
<p className="tags">{data.tags.map((tag) => <span key={tag}>{tag}</span>)}</p>
25+
</div>
26+
</div>
27+
)
28+
}

‎src/component/market/marketTitle.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import {Button, Input, MultiSelect, Select} from "@mantine/core";
2+
3+
export const MarketTitle = () => {
4+
return (
5+
<div className="market-title">
6+
<div className="market-image">
7+
<img src="/images/marketplace/backgroud.png"/>
8+
</div>
9+
<div className="market-filter">
10+
<div style={{
11+
display: "flex",
12+
gap: ".5rem"
13+
}}>
14+
<Input placeholder="Search in marketplace"/>
15+
<Button style={{
16+
backgroundColor: "#ee4b08",
17+
color: "#fff"
18+
}}>Search</Button>
19+
</div>
20+
<div style={{
21+
display: "flex",
22+
alignItems: "center",
23+
gap: ".5rem"
24+
}}>
25+
<a>Sort</a>
26+
<Select
27+
defaultValue={'Most popular'}
28+
data={['Most popular', 'Recently Updated', 'Most relevant', 'Most expensive','Most Cheapest']}
29+
/>
30+
</div>
31+
<div style={{
32+
display: "flex",
33+
alignItems: "center",
34+
gap: ".5rem"
35+
}}>
36+
<a>Type</a>
37+
<MultiSelect
38+
defaultValue={['All']}
39+
data={['All', 'Data', 'Code', 'Book', 'Image', 'Video', 'Audio',]}
40+
/>
41+
</div>
42+
</div>
43+
</div>
44+
)
45+
}

‎src/style/main.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@
55
@import "./filetree.css";
66
@import "./explore.css";
77
@import "./dashbored.css";
8-
@import "./usersetting.css";
8+
@import "./usersetting.css";
9+
@import "./market.css";

‎src/style/market.css

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
.market {
2+
position: absolute;
3+
@media screen and (min-width: 1421px) {
4+
min-width: 1421px;
5+
left: 50%;
6+
transform: translateX(-50%);
7+
}
8+
@media screen and (max-width: 1421px) {
9+
width: 100%;
10+
left: 0;
11+
}
12+
height: auto;
13+
}
14+
15+
.market-title {
16+
.market-image {
17+
width: 100%;
18+
height: 25vh;
19+
display: none;
20+
img {
21+
width: 100%;
22+
height: 100%;
23+
}
24+
}
25+
.market-filter {
26+
margin-top: 1rem;
27+
display: flex;
28+
align-items: center;
29+
padding: 1rem;
30+
width: 100%;
31+
height: 3rem;
32+
gap: 2rem;
33+
}
34+
}
35+
.market-display {
36+
display: flex;
37+
flex-wrap: wrap;
38+
gap: 1rem;
39+
justify-content: flex-start;
40+
margin-top: 1rem;
41+
border-left: 1px #f1f1f1 solid;
42+
border-right: 1px #f1f1f1 solid;
43+
}
44+
45+
.market-item {
46+
width: 300px;
47+
height: 100px;
48+
border: 1px #e0e0e0 solid;
49+
.market-item-image {
50+
padding: 0.5rem 1rem 0;
51+
display: flex;
52+
align-items: center;
53+
justify-content: space-between;
54+
gap: 1rem;
55+
56+
img {
57+
width: 2rem;
58+
height: 2rem;
59+
}
60+
.price {
61+
font-size: 14px;
62+
color: #19c965;
63+
}
64+
}
65+
.market-item-info {
66+
padding: 0 1rem;
67+
display: flex;
68+
flex-direction: column;
69+
p {
70+
margin: 0;
71+
font-size: 12px;
72+
}
73+
.tags {
74+
display: flex;
75+
gap: 0.5rem;
76+
span {
77+
font-size: 12px;
78+
background: #f1f1f1;
79+
padding: 0.02rem 0.3rem;
80+
border-radius: 0.5rem;
81+
}
82+
}
83+
}
84+
}

0 commit comments

Comments
 (0)