feat(app/pano):used toast component (#577)

# Description Added Toast component that will be triggered when the Copy Link text in the DropDown Menu is clicked. ### Checklist - [x] discord username: `muhammed-gumus` - [x] Closes <#568> - [x] PR must be created for an issue from issues under "In progress" column from [our project board](https://github.com/orgs/kamp-us/projects/2/views/1). - [x] A descriptive and understandable title: The PR title should clearly describe the nature and purpose of the changes. The PR title should be the first thing displayed when the PR is opened. And it should follow the semantic commit rules, and should include the app/package/service name in the title. For example, a title like "docs(@kampus-apps/pano): Add README.md" can be used. - [ ] Related file selection: Only relevant files should be touched and no other files should be affected. - [ ] I ran `npx turbo run` at the root of the repository, and build was successful. - [ ] I installed the npm packages using `npm install --save-exact <package>` so my package is pinned to a specific npm version. Leave empty if no package was installed. Leave empty if no package was installed with this PR. ### How were these changes tested? Please describe the tests you did to test the changes you made. Please also specify your test configuration. --------- Co-authored-by: Muhammed Gümüş <[email protected]> Co-authored-by: Can Sirin <[email protected]> Co-authored-by: Umut Sirin <[email protected]>
kamp-us · Aug 6, 2023 · 570f405 · 570f405
1 parent 1e6372f
commit 570f405
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 6 deletions.
diff --git a/apps/kampus/app/layout.tsx b/apps/kampus/app/layout.tsx
@@ -1,6 +1,8 @@
 import { type ReactNode } from "react";
 import { Inter } from "next/font/google";
 
+import { Toaster } from "@kampus/ui-next";
+
 import { RelayEnvironmentProvider } from "~/features/relay/RelayEnvironmentProvider";
 
 import "./globals.css";
@@ -20,6 +22,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       <body className={inter.className}>
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <RelayEnvironmentProvider>{children}</RelayEnvironmentProvider>
+          <Toaster />
         </ThemeProvider>
       </body>
     </html>

diff --git a/apps/kampus/app/pano/features/post-list/MoreOptions.tsx b/apps/kampus/app/pano/features/post-list/MoreOptions.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { MoreHorizontal } from "lucide-react";
 
 import {
@@ -6,6 +8,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  useToast,
 } from "@kampus/ui-next";
 
 interface Props {
@@ -26,7 +29,7 @@ type Post = {
 export const MoreOptionsDropdown = ({ post, shareUrl }: Props) => {
   // const user = useUserContext();
   console.log(post, shareUrl);
-
+  const { toast } = useToast();
   const ownerItems: JSX.Element[] = [];
   // if (canUserEdit(user, post)) {
   //   ownerItems.push(
@@ -54,7 +57,15 @@ export const MoreOptionsDropdown = ({ post, shareUrl }: Props) => {
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         {ownerItems}
-        <DropdownMenuItem>Adresi kopyala</DropdownMenuItem>
+        <DropdownMenuItem
+          onSelect={() => {
+            toast({
+              description: "Link kopyalandı",
+            });
+          }}
+        >
+          Linki kopyala
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );

diff --git a/packages/ui/components/index.ts b/packages/ui/components/index.ts
@@ -17,3 +17,4 @@ export * from "./toast";
 export * from "./top-nav";
 export * from "./use-toast";
 export * from "./user-avatar";
+export * from "./toaster";
diff --git a/packages/ui/components/toast.tsx b/packages/ui/components/toast.tsx
@@ -25,13 +25,13 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full",
+  "data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
   {
     variants: {
       variant: {
         default: "bg-background border",
         destructive:
-          "group destructive border-destructive bg-destructive text-destructive-foreground",
+          "destructive border-destructive bg-destructive text-destructive-foreground group",
       },
     },
     defaultVariants: {
@@ -61,7 +61,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-destructive/30 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
       className
     )}
     {...props}
@@ -76,7 +76,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className
     )}
     toast-close=""

diff --git a/packages/ui/components/toaster.tsx b/packages/ui/components/toaster.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  useToast,
+} from "@kampus/ui-next";
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && <ToastDescription>{description}</ToastDescription>}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}