Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 11 commits into from
Aug 6, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
dfee389
feat(apps/pano): used toast component for copy link
Jul 30, 2023
e9097d7
fix(apps/pano): remove unused import
cansirin Aug 2, 2023
73db0f6
Merge branch 'kamp-us:dev' into dev
muhammed-gumus Aug 2, 2023
b2a7feb
Update apps/kampus/app/pano/features/post-list/MoreOptions.tsx
muhammed-gumus Aug 2, 2023
61d0ede
Update apps/kampus/app/pano/features/post-list/MoreOptions.tsx
muhammed-gumus Aug 2, 2023
d3f02a4
fix(apps/pano):added Link Kopyalandı toast
muhammed-gumus Aug 4, 2023
db59524
fix(apps/pano):run prettier
muhammed-gumus Aug 4, 2023
4d6f378
Merge branch 'dev' into dev
usirin Aug 4, 2023
2b51958
Update apps/kampus/app/pano/features/post-list/MoreOptions.tsx
usirin Aug 4, 2023
ff95cf7
Merge branch 'dev' into dev
cansirin Aug 6, 2023
b057fb1
fix(apps/pano): used unused args
muhammed-gumus Aug 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions apps/kampus/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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>
Expand Down
15 changes: 13 additions & 2 deletions apps/kampus/app/pano/features/post-list/MoreOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
"use client";

import { MoreHorizontal } from "lucide-react";

import {
Expand All @@ -6,6 +8,7 @@ import {
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
useToast,
} from "@kampus/ui-next";

interface Props {
Expand All @@ -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(
Expand Down Expand Up @@ -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>
);
Expand Down
1 change: 1 addition & 0 deletions packages/ui/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,4 @@ export * from "./toast";
export * from "./top-nav";
export * from "./use-toast";
export * from "./user-avatar";
export * from "./toaster";
8 changes: 4 additions & 4 deletions packages/ui/components/toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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}
Expand All @@ -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=""
Expand Down
33 changes: 33 additions & 0 deletions packages/ui/components/toaster.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}