Skip to content

Commit f6a3ed8

Browse files
MeetBagdaMeetBagda
committed
add: dashboard done, list added
1 parent 81da341 commit f6a3ed8

File tree

4 files changed

+234
-3
lines changed

4 files changed

+234
-3
lines changed

‎src/App.jsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import "./App.css";
2+
import ContentContainer from "./components/ContentContainer";
23
import Layout from "./Layout";
34

45
function App() {
56
return (
67
<div>
7-
8-
<Layout/>
8+
<Layout>
9+
<ContentContainer/>
10+
</Layout>
11+
912
</div>
1013
);
1114
}

‎src/components/ContentContainer.jsx

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import React from "react";
2+
import Button from "./Button";
3+
import RepositoryList from "./ListComponent";
4+
5+
const ContentContainer = () => {
6+
const repositories = [
7+
{
8+
"repositoryName": "WeatherAppFrontend",
9+
"language": "React",
10+
"databaseSize": "85MB",
11+
"modifiedAt": "2024-12-20",
12+
"isPublic": true
13+
},
14+
{
15+
"repositoryName": "FinanceTrackerBackend",
16+
"language": "Node.js",
17+
"databaseSize": "1.5GB",
18+
"modifiedAt": "2024-12-15",
19+
"isPublic": false
20+
},
21+
{
22+
"repositoryName": "MachineLearningToolkit",
23+
"language": "Python",
24+
"databaseSize": "12.5GB",
25+
"modifiedAt": "2024-12-19",
26+
"isPublic": false
27+
},
28+
{
29+
"repositoryName": "PortfolioWebsite",
30+
"language": "React",
31+
"databaseSize": "75MB",
32+
"modifiedAt": "2024-12-18",
33+
"isPublic": true
34+
},
35+
{
36+
"repositoryName": "ECommercePlatform",
37+
"language": "JavaScript",
38+
"databaseSize": "1.2GB",
39+
"modifiedAt": "2024-12-22",
40+
"isPublic": false
41+
},
42+
{
43+
"repositoryName": "DataAnalyticsPipeline",
44+
"language": "Python",
45+
"databaseSize": "800MB",
46+
"modifiedAt": "2024-12-21",
47+
"isPublic": true
48+
},
49+
{
50+
"repositoryName": "TravelPlannerApp",
51+
"language": "React",
52+
"databaseSize": "120MB",
53+
"modifiedAt": "2024-12-23",
54+
"isPublic": true
55+
}
56+
];
57+
58+
return (
59+
<div className="w-full h-full p-3">
60+
<div className="flex flex-col p-4 bg-white w-full h-full rounded-xl border border-slate-300">
61+
<div className=" w-full h-40 p-2 flex flex-row">
62+
<div className=" w-full flex flex-col gap-4">
63+
<div>
64+
<h1 className="font-semibold text-2xl">Repositories</h1>
65+
<h5>33 total repositories</h5>
66+
</div>
67+
<div className="w-80 border border-gray-300 flex flex-row justify-center items-center rounded-md px-3">
68+
<svg
69+
xmlns="http://www.w3.org/2000/svg"
70+
fill="none"
71+
viewBox="0 0 24 24"
72+
stroke-width="1.5"
73+
stroke="currentColor"
74+
class="size-6"
75+
>
76+
<path
77+
stroke-linecap="round"
78+
stroke-linejoin="round"
79+
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
80+
/>
81+
</svg>
82+
83+
<input
84+
type="text"
85+
className=" rounded-md px-3 py-2 w-full focus:outline-none"
86+
placeholder="Search repositories"
87+
/>
88+
</div>
89+
</div>
90+
<div className=" w-full h-10 flex flex-row justify-end gap-2">
91+
<Button className="flex flex-row justify-start gap-2 items-center focus:bg-slate-300 border border-slate-300">
92+
<svg
93+
xmlns="http://www.w3.org/2000/svg"
94+
fill="none"
95+
viewBox="0 0 24 24"
96+
stroke-width="1.5"
97+
stroke="currentColor"
98+
class="size-6"
99+
>
100+
<path
101+
stroke-linecap="round"
102+
stroke-linejoin="round"
103+
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
104+
/>
105+
</svg>
106+
Refresh All
107+
</Button>
108+
<Button className="flex flex-row justify-start gap-2 items-center bg-blue-600 text-white">
109+
<svg
110+
xmlns="http://www.w3.org/2000/svg"
111+
fill="none"
112+
viewBox="0 0 24 24"
113+
stroke-width="1.5"
114+
stroke="currentColor"
115+
class="size-6"
116+
>
117+
<path
118+
stroke-linecap="round"
119+
stroke-linejoin="round"
120+
d="M12 4.5v15m7.5-7.5h-15"
121+
/>
122+
</svg>
123+
Add Repository
124+
</Button>
125+
</div>
126+
</div>
127+
<hr />
128+
<div className=" w-full h-auto">
129+
<RepositoryList repositories={repositories} />
130+
</div>
131+
</div>
132+
</div>
133+
);
134+
};
135+
136+
export default ContentContainer;

‎src/components/ListComponent.jsx

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React from "react";
2+
3+
const RepositoryListItem = ({
4+
repositoryName,
5+
language,
6+
databaseSize,
7+
modifiedAt,
8+
onHover,
9+
isPublic, // Add this prop to receive public/private status
10+
}) => {
11+
return (
12+
<div
13+
className="flex flex-col justify-around p-2 h-24 border-b border-gray-200 hover:bg-gray-100 cursor-pointer"
14+
onMouseEnter={onHover}
15+
onMouseLeave={onHover}
16+
>
17+
<div>
18+
<div className="flex flex-row items-center gap-3 ">
19+
<div className="font-semibold text-lg">{repositoryName}</div>
20+
<div className="text-xs text-blue-700 rounded-full border bg-sky-50 border-sky-400 px-3">
21+
{isPublic ? "Public" : "Private"}{" "}
22+
{/* Display status based on isPublic */}
23+
</div>
24+
</div>
25+
</div>
26+
<div className="flex flex-row items-center gap-8">
27+
<div className="text-gray-500 flex flex-row gap-2">
28+
{language}
29+
<div className="text-blue-600">
30+
{" "}
31+
<svg
32+
xmlns="http://www.w3.org/2000/svg"
33+
viewBox="0 0 24 24"
34+
fill="currentColor"
35+
class="size-6"
36+
>
37+
<path
38+
fill-rule="evenodd"
39+
d="M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm14.25 6a.75.75 0 0 1-.22.53l-2.25 2.25a.75.75 0 1 1-1.06-1.06L15.44 12l-1.72-1.72a.75.75 0 1 1 1.06-1.06l2.25 2.25c.141.14.22.331.22.53Zm-10.28-.53a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 1 0 1.06-1.06L8.56 12l1.72-1.72a.75.75 0 1 0-1.06-1.06l-2.25 2.25Z"
40+
clip-rule="evenodd"
41+
/>
42+
</svg>
43+
</div>
44+
</div>
45+
<div className="flex flex-row gap-1 text-gray-500">
46+
<svg
47+
xmlns="http://www.w3.org/2000/svg"
48+
fill="none"
49+
viewBox="0 0 24 24"
50+
stroke-width="1.5"
51+
stroke="currentColor"
52+
class="size-6"
53+
>
54+
<path
55+
stroke-linecap="round"
56+
stroke-linejoin="round"
57+
d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"
58+
/>
59+
</svg>
60+
{databaseSize}
61+
</div>
62+
<div className="text-gray-500">Modified At: {modifiedAt}</div>
63+
</div>
64+
</div>
65+
);
66+
};
67+
68+
const RepositoryList = ({ repositories }) => {
69+
const handleHover = (item) => {
70+
console.log(`Hovering over repository: ${item.repositoryName}`);
71+
};
72+
73+
return (
74+
<div className="w-full overflow-y-auto">
75+
<div className="max-h-[calc(100vh-200px)]">
76+
{repositories.map((repository) => (
77+
<RepositoryListItem
78+
key={repository.repositoryName}
79+
repositoryName={repository.repositoryName}
80+
language={repository.language}
81+
databaseSize={repository.databaseSize}
82+
modifiedAt={repository.modifiedAt}
83+
onHover={() => handleHover(repository)}
84+
isPublic={repository.isPublic}
85+
/>
86+
))}
87+
</div>
88+
</div>
89+
);
90+
};
91+
92+
export default RepositoryList;

‎src/components/Sidebar.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Button from "./Button";
33

44
const Sidebar = () => {
55
return (
6-
<div className="w-60 h-screen flex flex-col">
6+
<div className="w-60 h-screen flex flex-col border border-slate-300">
77
{/* Logo */}
88
<div className="p-4 flex text-bold text-2xl uppercase justify-start items-center gap-3">
99
<img

0 commit comments

Comments
 (0)