Skip to content

Commit

Permalink
Updated contributors dialog & fixed minor issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@akadeepesh
akadeepesh committed Sep 7, 2024
1 parent 6d393d0 commit 0c27a5e
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 56 deletions.
116 changes: 64 additions & 52 deletions src/components/Contributors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,17 @@ import {
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "./ui/tooltip";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Separator } from "./ui/separator";
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
import { Dialog, DialogContent, DialogTrigger } from "./ui/dialog";
import { CircleAlert } from "lucide-react";
import { Button } from "./ui/button";
} from "@/components/ui/tooltip";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { CircleAlert, Users } from "lucide-react";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { VERSION } from "../../Version";
import Chords from "./LandingComp/Chords";
import { Badge } from "./ui/badge";

const contributors = [
{
Expand Down Expand Up @@ -42,70 +44,80 @@ const contributors = [
},
];

const Contributors = () => {
export default function Contributors() {
return (
<div>
<Dialog>
<DialogTrigger>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<span className="hover:bg-accent hover:text-accent-foreground inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-9 px-3">
<CircleAlert />
</span>
</TooltipTrigger>
<TooltipContent>
<p>Contributors</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</DialogTrigger>
<DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
<Card className="border-none -m-5">
<CardHeader>
<p>Chords:{VERSION}</p>
<CardTitle>
<div className="flex justify-between">
<span className="text-lg">Contributors</span>
<span className="text-sm text-muted-foreground">
Alphabetical Order
</span>
</div>
</CardTitle>
<Separator className="bg-primary" />
</CardHeader>
<CardContent className="flex justify-center items-center gap-5">
<Dialog>
<DialogTrigger>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon">
<CircleAlert className="h-5 w-5" />
<span className="sr-only">View Contributors</span>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Contributors</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px] md:max-w-[570px] lg:max-w-[650px]">
<Card className="border-none">
<CardHeader className="p-0 mb-2">
<CardTitle className="font-bold items-center gap-2 flex mb-1">
<Chords />
<Badge className="text-xs bg-muted-foreground">v{VERSION}</Badge>
</CardTitle>
<div className="flex flex-col justify-center items-center">
<p className="text-2xl font-semibold">Contributors</p>
<p className="text-xs text-muted-foreground">
Listed alphabetically
</p>
</div>
</CardHeader>
<Separator className="mb-4" />
<CardContent>
<div className="grid grid-cols-3 gap-4">
{contributors.map((contributor) => (
<Link
key={contributor.github}
href={`https://github.com/${contributor.github}`}
target="_blank"
className="group"
>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant={"ghost"} size={"sm"}>
<Avatar>
<AvatarImage src={contributor.avatar} />
<div className="flex flex-col items-center space-y-2 transition-transform duration-200 ease-in-out transform group-hover:scale-105">
<Avatar className="h-16 w-16 border-2 border-transparent group-hover:border-primary">
<AvatarImage
src={contributor.avatar}
alt={contributor.name}
/>
<AvatarFallback>
{contributor.name.split(" ")[0]}
{contributor.name[0]}
</AvatarFallback>
</Avatar>
</Button>
<p className="text-xs font-medium text-center group-hover:text-primary transition-colors duration-200">
{contributor.name}
</p>
</div>
</TooltipTrigger>
<TooltipContent>
<p>{contributor.name}</p>
<p className="text-xs text-muted-foreground">
@{contributor.github}
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</Link>
))}
</CardContent>
</Card>
</DialogContent>
</Dialog>
</div>
</div>
</CardContent>
</Card>
</DialogContent>
</Dialog>
);
};

export default Contributors;
}
6 changes: 3 additions & 3 deletions src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ const Navbar = () => {
<div>
<div className="top-0 md:left-0 md:right-0 flex backdrop-blur-sm justify-center py-[10px] border-b items-center font-bold z-50">
<div className="flex w-full max-w-screen mx-4 md:mx-16 justify-between items-center">
<div className="flex flex-row gap-2 group">
<div className="flex flex-row gap-2 items-center group">
<Link href="/">
<div className="font-rancho text-primary font-bold text-2xl hover:cursor-pointer transition-transform transform-gpu duration-300 hover:text-gradient bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 text-transparent bg-clip-text ">
<div className="font-rancho font-bold text-2xl hover:cursor-pointer transition-transform transform-gpu duration-300 hover:text-gradient bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 text-transparent bg-clip-text ">
Chords
</div>
</Link>
<Badge
variant={"outline"}
className="mt-1 font-poppins tracking-wider font-thin rounded group-hover:bg-secondary"
className="font-poppins tracking-wider font-thin h-fit rounded group-hover:bg-secondary"
>
Alpha
</Badge>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Steps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ const Steps: React.FC = () => {
<span className="flex flex-row gap-2">
Click{" "}
<Badge className="cursor-default">
<p className="text-sm sm:text-base">&quot;Connect&quot;</p>
<p className="text-sm sm:text-base">Connect</p>
</Badge>{" "}
For Board Connection.
</span>
Expand Down

0 comments on commit 0c27a5e

Please sign in to comment.