noham/lanyard-profile-readme
1
0
Fork 0
mirror of https://github.com/NohamR/lanyard-profile-readme.git synced 2026-05-26 04:17:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): using popover instead of tooltip to support cross-platform

Browse Source
This commit is contained in:
Hexagonn
2024-11-09 14:07:57 +00:00
committed by GitHub
parent f2dd2cba49
commit b394a4ed82
4 changed files with 67 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/app/page.tsx
View File

@@ -30,11 +30,10 @@ import {
SelectValue,
} from "@/components/ui/select";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Input } from "@/components/ui/input";
import { filterLetters } from "@/lib/utils";
import { Button } from "@/components/ui/button";
@@ -338,33 +337,25 @@ export default function Home() {
className="flex flex-col gap-1"
>
<div className="flex items-center gap-1">
<p>{item.title}</p>
<TooltipProvider
delayDuration={100}
>
<Tooltip>
<TooltipTrigger
onFocus={(
e,
) => {
e.preventDefault();
}}
>
<Icon.HelpCircleIcon
size={
18
}
/>
</TooltipTrigger>
<TooltipContent>
<p>
{
item.description
}
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<p className="text-sm sm:text-base">
{item.title}
</p>
<Popover>
<PopoverTrigger>
<Icon.InfoIcon
size={24}
className="rounded-md p-1 text-gray-400 transition hover:bg-stone-950"
/>
</PopoverTrigger>
<PopoverContent
side="top"
className="text-sm"
>
{
item.description
}
</PopoverContent>
</Popover>
</div>
{item.type === "string" && (
<Input
@@ -390,6 +381,7 @@ export default function Home() {
item.parameter,
)?.value || "",
)}
className="text-sm sm:text-base"
/>
)}
{item.type ===
@@ -451,7 +443,7 @@ export default function Home() {
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Theme" />
</SelectTrigger>
<SelectContent>
<SelectContent className="text-sm sm:text-base">
{item.options.list.map(
(
option,

33
src/components/ui/popover.tsx Normal file
View File

@@ -0,0 +1,33 @@
"use client";
import * as React from "react";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import { cn } from "@/lib/utils";
const Popover = PopoverPrimitive.Root;
const PopoverTrigger = PopoverPrimitive.Trigger;
const PopoverAnchor = PopoverPrimitive.Anchor;
const PopoverContent = React.forwardRef<
React.ElementRef<typeof PopoverPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
ref={ref}
align={align}
sideOffset={sideOffset}
className={cn(
"z-50 w-72 rounded-md border border-stone-800 bg-stone-950 p-4 text-stone-50 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}
{...props}
/>
</PopoverPrimitive.Portal>
));
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

32
src/components/ui/tooltip.tsx
View File

@@ -1,32 +0,0 @@
"use client";
import * as React from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { cn } from "@/lib/utils";
const TooltipProvider = TooltipPrimitive.Provider;
const Tooltip = TooltipPrimitive.Root;
const TooltipTrigger = TooltipPrimitive.Trigger;
const TooltipContent = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md bg-stone-900 px-3 py-1.5 text-xs text-stone-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}
{...props}
/>
</TooltipPrimitive.Portal>
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };