Add UI Profile and repository

src/SearchBugs.Api/Program.cs

@@ -33,7 +33,7 @@ private static void Main(string[] args)
         app.MapProjectsEndpoints();
         app.MapRepoEndpoints();
 
-        app.UseHttpsRedirection();
+        // app.UseHttpsRedirection();
         app.UseAuthentication();
 
         app.UseMiddleware<ExceptionHandlingMiddleware>();

src/SearchBugs.Ui/src/Route.tsx

@@ -7,10 +7,11 @@ import {
   DashboardPage,
   LoginPage,
   NotificationsPage,
+  ProfilePage,
   ProjectDetailsPage,
   ProjectsPage,
   RegisterPage,
-  RepositoriesPage,
+  RepositoryPage,
   RepositoryDetailsPage,
   SettingPage,
   UserDetailsPage,
@@ -50,13 +51,17 @@ const router = createBrowserRouter([
         path: "/users",
         element: <UsersPage />,
       },
+      {
+        path: "/profile",
+        element: <ProfilePage />,
+      },
       {
         path: "/users/:userId",
         element: <UserDetailsPage />,
       },
       {
-        path: "/repositories",
-        element: <RepositoriesPage />,
+        path: "/:username/:repository",
+        element: <RepositoryPage />,
       },
       {
         path: "/repositories/:url",

src/SearchBugs.Ui/src/components/footer/Footer.tsx

@@ -0,0 +1,10 @@
+
+export const Footer = () => {
+    return (
+        <footer className="bg-gray-900 text-white">
+        <div className="container mx-auto p-4 text-center text-sm">
+            <p>&copy; 2021 SearchBugs. All rights reserved.</p>
+        </div>
+      </footer>
+    )
+}

src/SearchBugs.Ui/src/components/header/Header.tsx

@@ -0,0 +1,45 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Bell, Plus } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+export const Header = () => {
+    const navigate = useNavigate();
+    return (
+        <header className="bg-gray-900 text-white">
+        <div className="container mx-auto flex items-center justify-between p-4">
+          <div className="flex items-center space-x-4">
+            <svg
+              viewBox="0 0 16 16"
+              className="h-8 w-8 fill-current"
+              aria-hidden="true"
+            >
+              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+            </svg>
+            <Input className="w-64" placeholder="Search or jump to..." />
+          </div>
+          <nav className="hidden md:flex md:items-center md:space-x-4">
+            <Button variant="ghost">Pull requests</Button>
+            <Button variant="ghost">Issues</Button>
+            <Button variant="ghost">Marketplace</Button>
+            <Button variant="ghost">Explore</Button>
+          </nav>
+          <div className="flex items-center space-x-4">
+            <Button size="icon" variant="ghost">
+              <Bell className="h-5 w-5" />
+              <span className="sr-only">Notifications</span>
+            </Button>
+            <Button size="icon" variant="ghost">
+              <Plus className="h-5 w-5" />
+              <span className="sr-only">New</span>
+            </Button>
+            <Avatar className="h-8 w-8" onClick={() => navigate("/profile")}>
+              <AvatarImage alt="@username" src="https://avatars.githubusercontent.com/u/48352653" />
+              <AvatarFallback>UN</AvatarFallback>
+            </Avatar>
+          </div>
+        </div>
+      </header>
+    );
+}

src/SearchBugs.Ui/src/layouts/Main.tsx

@@ -1,54 +1,16 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Bell, Plus } from "lucide-react";
+
+import { Footer } from "@/components/footer/Footer";
+import { Header } from "@/components/header/Header";
 import { Outlet } from "react-router-dom";
 
 export default function Layout() {
   return (
     <div className="flex min-h-screen flex-col">
-      <header className="bg-gray-900 text-white">
-        <div className="container mx-auto flex items-center justify-between p-4">
-          <div className="flex items-center space-x-4">
-            <svg
-              viewBox="0 0 16 16"
-              className="h-8 w-8 fill-current"
-              aria-hidden="true"
-            >
-              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
-            </svg>
-            <Input className="w-64" placeholder="Search or jump to..." />
-          </div>
-          <nav className="hidden md:flex md:items-center md:space-x-4">
-            <Button variant="ghost">Pull requests</Button>
-            <Button variant="ghost">Issues</Button>
-            <Button variant="ghost">Marketplace</Button>
-            <Button variant="ghost">Explore</Button>
-          </nav>
-          <div className="flex items-center space-x-4">
-            <Button size="icon" variant="ghost">
-              <Bell className="h-5 w-5" />
-              <span className="sr-only">Notifications</span>
-            </Button>
-            <Button size="icon" variant="ghost">
-              <Plus className="h-5 w-5" />
-              <span className="sr-only">New</span>
-            </Button>
-            <Avatar className="h-8 w-8">
-              <AvatarImage alt="@username" src="/placeholder-user.jpg" />
-              <AvatarFallback>UN</AvatarFallback>
-            </Avatar>
-          </div>
-        </div>
-      </header>
+      <Header />
       <main className="flex-1 bg-gray-100">
         <Outlet />
       </main>
-      <footer className="bg-gray-900 text-white">
-        <div className="container mx-auto p-4 text-center text-sm">
-          © 2024 GitHub, Inc. Terms Privacy Security Status Help
-        </div>
-      </footer>
+      <Footer />
     </div>
   );
 }

src/SearchBugs.Ui/src/modules/profile/ContibutionActivity.tsx

@@ -0,0 +1,99 @@
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+  } from "@/components/ui/card";
+  import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+  } from "@/components/ui/select";
+
+const ContributionCell: React.FC<{ level: number }> = ({ level }) => {
+    const bgColor = [
+      "bg-gray-100",
+      "bg-green-100",
+      "bg-green-300",
+      "bg-green-500",
+      "bg-green-700",
+    ][level];
+
+    return <div className={`w-3 h-3 ${bgColor} rounded-sm`} />;
+  };
+
+const ContributionGraph: React.FC = () => {
+    const weeks = 52;
+    const days = 7;
+
+    const generateRandomContributions = () => {
+      return Array.from({ length: weeks * days }, () =>
+        Math.floor(Math.random() * 5)
+      );
+    };
+
+    const contributions = generateRandomContributions();
+
+    return (
+      <div className="flex flex-no-wrap gap-1 w-full overflow-x-auto">
+        {Array.from({ length: weeks }).map((_, weekIndex) => (
+          <div key={weekIndex} className="flex flex-col gap-1">
+            {Array.from({ length: days }).map((_, dayIndex) => (
+              <ContributionCell
+                key={dayIndex}
+                level={contributions[weekIndex * days + dayIndex]}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+interface ContributionActivityProps {
+    years: string[];
+    selectedYear: string;
+    setSelectedYear: (year: string) => void;
+}
+
+
+export const ContributionActivity: React.FC<ContributionActivityProps> = ({
+    years,
+    selectedYear,
+    setSelectedYear,
+  }) => {
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between py-3">
+        <CardTitle className="text-lg">Contribution Activity</CardTitle>
+        <Select value={selectedYear} onValueChange={setSelectedYear}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Select year" />
+          </SelectTrigger>
+          <SelectContent>
+            {years.map((year) => (
+              <SelectItem key={year} value={year}>
+                {year}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </CardHeader>
+      <CardContent>
+        <div className="mb-2 flex items-center justify-start space-x-2 text-sm text-gray-500">
+          <span>Less</span>
+          <ContributionCell level={0} />
+          <ContributionCell level={1} />
+          <ContributionCell level={2} />
+          <ContributionCell level={3} />
+          <ContributionCell level={4} />
+          <span>More</span>
+        </div>
+        <ContributionGraph />
+      </CardContent>
+    </Card>
+  );
+};

src/SearchBugs.Ui/src/modules/profile/Overview.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import { ContributionActivity } from "@/modules/profile/ContibutionActivity";
+import { Activity, ActivityType, RecentActivity } from "./RecentActivity";
+import { PopularRepository } from "./PopularRepository";
+
+export const Overview: React.FC = () => {
+  const [selectedYear, setSelectedYear] = useState(
+    new Date().getFullYear().toString()
+  );
+  const years = Array.from({ length: 5 }, (_, i) =>
+    (new Date().getFullYear() - i).toString()
+  );
+
+  const activities : Activity[] = [
+    {
+      type: ActivityType.Push,
+      actor: "vicheanath",
+      repository: "search-bugs",
+      createdAt: "2021-10-10",
+      title: "pushed to",
+      description: "Add new feature",
+      avatar: "https://avatars.githubusercontent.com/u/48352653",
+    },
+    {
+      type: ActivityType.PullRequest,
+      actor: "vicheanath",
+      repository: "search-bugs",
+      createdAt: "2021-10-10",
+      title: "opened a pull request in",
+      description: "Add new feature",
+      avatar: "https://avatars.githubusercontent.com/u/48352653",
+    },
+    {
+      type: ActivityType.Issue,
+      actor: "vicheanath",
+      repository: "search-bugs",
+      createdAt: "2021-10-10",
+      title: "opened an issue in",
+      description: "Add new feature",
+      avatar: "https://avatars.githubusercontent.com/u/48352653",
+    },
+    {
+      type: ActivityType.Create,
+      actor: "vicheanath",
+      repository: "search-bugs",
+      createdAt: "2021-10-10",
+      title: "created a repository",
+      description: "You have created this repository",
+      avatar: "https://avatars.githubusercontent.com/u/48352653",
+    },
+    {
+      type: ActivityType.Fork,
+      actor: "vicheanath",
+      repository: "search-bugs",
+      createdAt: "2021-10-10",
+      title: "forked",
+      description: "You have forked this repository",
+      avatar: "https://avatars.githubusercontent.com/u/48352653",
+    },
+    {
+      type: ActivityType.Watch,
+      actor: "vicheanath",
+      repository: "search-bugs",
+      createdAt: "2021-10-10",
+      title: "starred",
+      description: "You have starred this repository",
+      avatar: "https://avatars.githubusercontent.com/u/48352653",
+    },
+  ];
+
+  return (
+    <>
+      <ContributionActivity
+        years={years}
+        selectedYear={selectedYear}
+        setSelectedYear={setSelectedYear}
+      />
+      <PopularRepository />
+
+      <RecentActivity activities={activities} />
+    </>
+  );
+};

src/SearchBugs.Ui/src/modules/profile/PopularRepository.tsx

@@ -0,0 +1,53 @@
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+  } from "@/components/ui/card";
+  import { Badge } from "@/components/ui/badge";
+  import { Book, GitFork, Star } from "lucide-react";
+
+export const PopularRepository: React.FC = () => {
+
+    return (
+        <Card>
+        <CardHeader>
+          <CardTitle className="text-lg">Popular repositories</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-4 sm:grid-cols-2">
+            {[1, 2, 3, 4].map((_, index) => (
+              <Card key={index}>
+                <CardHeader>
+                  <CardTitle className="text-lg">
+                    <Book className="mr-2 inline-block h-4 w-4" />
+                    <a href="#" className="hover:underline">
+                      repo-name-{index + 1}
+                    </a>
+                  </CardTitle>
+                  <CardDescription>
+                    Short description of the repository
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex space-x-4 text-sm text-gray-500">
+                    <span className="flex items-center">
+                      <Star className="mr-1 h-4 w-4" />
+                      {Math.floor(Math.random() * 1000)}
+                    </span>
+                    <span className="flex items-center">
+                      <GitFork className="mr-1 h-4 w-4" />
+                      {Math.floor(Math.random() * 100)}
+                    </span>
+                    <Badge>Public</Badge>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+
+}