Your Devsoc Team
diff --git a/devsoc24-portal-fe/src/components/track/TrackCard.tsx b/devsoc24-portal-fe/src/components/track/TrackCard.tsx
new file mode 100644
index 0000000..81e0c48
--- /dev/null
+++ b/devsoc24-portal-fe/src/components/track/TrackCard.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import Image from "next/image";
+
+const TrackCard = (props: { name: string; imagesrc: string }) => {
+ return (
+
+ );
+};
+
+export default TrackCard;
diff --git a/devsoc24-portal-fe/src/components/track/TrackComponent.tsx b/devsoc24-portal-fe/src/components/track/TrackComponent.tsx
new file mode 100644
index 0000000..0f7bd4f
--- /dev/null
+++ b/devsoc24-portal-fe/src/components/track/TrackComponent.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import TrackCard from "./TrackCard";
+
+const tracks = [
+ {
+ imgsrc: "/images/trackImg1.svg",
+ name: "Secret Track 1",
+ },
+ {
+ imgsrc: "/images/trackImg1.svg",
+ name: "Secret Track 2",
+ },
+ {
+ imgsrc: "/images/trackImg1.svg",
+ name: "Secret Track 3",
+ },
+ {
+ imgsrc: "/images/trackImg1.svg",
+ name: "Secret Track 4",
+ },
+ {
+ imgsrc: "/images/trackImg1.svg",
+ name: "Secret Track 5",
+ },
+ {
+ imgsrc: "/images/trackImg1.svg",
+ name: "Secret Track 6",
+ },
+];
+const TrackComponent = () => {
+ return (
+
+
+ Track Details
+
+
+ {tracks.map((item, index) => (
+
+ ))}
+
+
+ );
+};
+
+export default TrackComponent;
diff --git a/devsoc24-portal-fe/src/styles/globals.css b/devsoc24-portal-fe/src/styles/globals.css
index 177aef6..fe1e567 100644
--- a/devsoc24-portal-fe/src/styles/globals.css
+++ b/devsoc24-portal-fe/src/styles/globals.css
@@ -88,4 +88,22 @@
/* Black color */
/* Rounded corners */
+}
+
+/* Track Component Scrollbar */
+.trackComponent::-webkit-scrollbar {
+ width: 3px; /* Width of the scrollbar */
+}
+
+.trackComponent::-webkit-scrollbar-track {
+ background: #f1f1f1; /* Color of the scrollbar track */
+}
+
+.trackComponent::-webkit-scrollbar-thumb {
+ background: #888; /* Color of the scrollbar thumb */
+ border-radius: 6px; /* Roundness of the scrollbar thumb */
+}
+
+.trackComponent::-webkit-scrollbar-thumb:hover {
+ background: #555; /* Color of the scrollbar thumb on hover */
}
\ No newline at end of file