Paste/Frontend
Archived
2
0
Fork 0
Code Issues 1 Pull Requests 7 Actions Activity

add info button to the action menu
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m21s
Details
Publish Docker Image / docker (ubuntu-latest) (push) Successful in 1m22s
Details

Browse Source
This commit is contained in:
Lee
2024-04-24 19:53:58 +01:00
parent 71e913092e
commit 9d0f4422eb
5 changed files with 238 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/components/action-menu.tsx
View File

@ -1,4 +1,12 @@
import React from "react";
import Link from "next/link";
import { Button } from "@/app/components/ui/button";
import { HeartIcon, InformationCircleIcon } from "@heroicons/react/24/outline";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/app/components/ui/tooltip";
type ActionMenuProps = {
children?: React.ReactNode;
@ -9,6 +17,28 @@ export function ActionMenu({ children }: ActionMenuProps) {
<div className="absolute top-0 right-0 flex flex-col items-end mx-3 mt-2">
<div className="flex items-center bg-secondary rounded-md p-2 gap-2">
{children}
<Tooltip>
<TooltipTrigger asChild>
<Link href={"https://git.fascinated.cc/Paste"} target="_blank">
<Button>
<InformationCircleIcon width={24} height={24} />
</Button>
</Link>
</TooltipTrigger>
<TooltipContent className="flex flex-col gap-2">
<div>
<p className="font-semibold">This project is open source!</p>
<div className="flex gap-1.5 items-center">
<p>Made with</p>
<HeartIcon width={16} height={16} color="#e31b23" />
<p>by Fascinated</p>
</div>
</div>
<p>Click to view the Source Code</p>
</TooltipContent>
</Tooltip>
</div>
</div>
);

30
src/app/components/ui/tooltip.tsx Normal file
View File

@ -0,0 +1,30 @@
"use client";
import * as React from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { cn } from "@/app/common/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.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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}
/>
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

21
src/app/layout.tsx
View File

@ -5,6 +5,7 @@ import { ReactNode } from "react";
import { jetbrainsMono } from "@/app/common/font/font";
import { Toaster } from "@/app/components/ui/toaster";
import { cn } from "@/app/common/utils";
import { TooltipProvider } from "@/app/components/ui/tooltip";
export const metadata: Metadata = {
title: "Paste",
@ -19,15 +20,17 @@ export default function RootLayout({
return (
<html lang="en">
<body className={cn(jetbrainsMono.className, "w-screen h-screen")}>
<Toaster />
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
<TooltipProvider>
<Toaster />
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</TooltipProvider>
</body>
</html>
);