-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add "Additional Information" section to GitHub util (#3429)
## Description This PR adds some frontend enhancements to the GitHub util. Specifically, an "additional information" section is added to the username->global node id tool. before/after: <img width="2032" alt="image" src="https://github.com/user-attachments/assets/35228bad-666c-4dc5-8267-64c6ce7d392a"> ## Checklist - [x] I have read and understood the [WATcloud Guidelines](https://cloud.watonomous.ca/docs/community-docs/watcloud/guidelines) - [x] I have performed a self-review of my code
- Loading branch information
Showing
6 changed files
with
360 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import * as React from "react" | ||
| import * as AvatarPrimitive from "@radix-ui/react-avatar" | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
|
|
||
| const Avatar = React.forwardRef< | ||
| React.ElementRef<typeof AvatarPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> | ||
| >(({ className, ...props }, ref) => ( | ||
| <AvatarPrimitive.Root | ||
| ref={ref} | ||
| className={cn( | ||
| "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )) | ||
| Avatar.displayName = AvatarPrimitive.Root.displayName | ||
|
|
||
| const AvatarImage = React.forwardRef< | ||
| React.ElementRef<typeof AvatarPrimitive.Image>, | ||
| React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> | ||
| >(({ className, ...props }, ref) => ( | ||
| <AvatarPrimitive.Image | ||
| ref={ref} | ||
| className={cn("aspect-square h-full w-full", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| AvatarImage.displayName = AvatarPrimitive.Image.displayName | ||
|
|
||
| const AvatarFallback = React.forwardRef< | ||
| React.ElementRef<typeof AvatarPrimitive.Fallback>, | ||
| React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> | ||
| >(({ className, ...props }, ref) => ( | ||
| <AvatarPrimitive.Fallback | ||
| ref={ref} | ||
| className={cn( | ||
| "flex h-full w-full items-center justify-center rounded-full bg-muted", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )) | ||
| AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName | ||
|
|
||
| export { Avatar, AvatarImage, AvatarFallback } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import { cn } from "@/lib/utils"; | ||
| import { SiX } from "@icons-pack/react-simple-icons"; | ||
| import { GithubIcon, GlobeIcon, LinkedinIcon, MailIcon } from "lucide-react"; | ||
|
|
||
| import { Link } from "nextra-theme-docs"; | ||
| import { Fragment } from "react"; | ||
|
|
||
| export const DEFAULT_ICON_SIZE = 16; | ||
|
|
||
|
|
||
| export function SocialLink({ | ||
| link, | ||
| iconSize = DEFAULT_ICON_SIZE | ||
| }: { | ||
| link: string, | ||
| iconSize?: number, | ||
| }) { | ||
| let icon = <GlobeIcon size={iconSize} />; | ||
| let sr = "link"; | ||
| if (link.startsWith("mailto:")) { | ||
| icon = <MailIcon size={iconSize} />; | ||
| sr = "email"; | ||
| } else if (link.startsWith("https://github.com")) { | ||
| icon = <GithubIcon size={iconSize} />; | ||
| sr = "github"; | ||
| } else if (link.startsWith("https://linkedin.com")) { | ||
| icon = <LinkedinIcon size={iconSize} />; | ||
| sr = "linkedin"; | ||
| } else if (link.startsWith("https://twitter.com") || link.startsWith("https://x.com")) { | ||
| icon = <SiX size={iconSize} />; | ||
| sr = "twitter"; | ||
| } | ||
| return ( | ||
| <Fragment key={link}> | ||
| <dt className="sr-only">{sr}</dt> | ||
| <dd className="inline-block"> | ||
| <Link | ||
| className="text-xs hover:text-gray-900 dark:hover:text-white" | ||
| href={link} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| {icon} | ||
| </Link> | ||
| </dd> | ||
| </Fragment> | ||
| ) | ||
| } | ||
|
|
||
| export function SocialLinks({ | ||
| links, | ||
| className, | ||
| iconSize = DEFAULT_ICON_SIZE | ||
| }: { | ||
| links: string[], | ||
| className?: string, | ||
| iconSize?: number, | ||
| }) { | ||
| return ( | ||
| <div className={cn(className)}> | ||
| {links.filter((link) => link).map((link) => <SocialLink key={link} link={link} iconSize={iconSize} />)} | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.