mirror of
https://github.com/ahmadk953/tasko.git
synced 2025-05-01 03:09:34 +00:00
Formated Files
This commit is contained in:
Ahmad
parent
d5631b309a
commit
e768d9181f
138 changed files with 1829 additions and 1851 deletions
|
|
@ -1,9 +1,7 @@
|
|||
const ClerkLayout = ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className='flex h-full items-center justify-center'>{children}</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ClerkLayout;
|
||||
export default ClerkLayout;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { OrganizationList } from "@clerk/nextjs";
|
||||
import { OrganizationList } from '@clerk/nextjs';
|
||||
|
||||
export default function CreateOrganizationPage() {
|
||||
return (
|
||||
<OrganizationList
|
||||
hidePersonal
|
||||
afterSelectOrganizationUrl="/organization/:id"
|
||||
afterCreateOrganizationUrl="/organization/:id"
|
||||
afterSelectOrganizationUrl='/organization/:id'
|
||||
afterCreateOrganizationUrl='/organization/:id'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { SignIn } from "@clerk/nextjs";
|
||||
import { SignIn } from '@clerk/nextjs';
|
||||
|
||||
export default function Page() {
|
||||
return <SignIn />;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { SignUp } from "@clerk/nextjs";
|
||||
import { SignUp } from '@clerk/nextjs';
|
||||
|
||||
export default function Page() {
|
||||
return <SignUp />;
|
||||
|
|
|
|||
|
|
@ -1,57 +1,57 @@
|
|||
import { Plus } from "lucide-react";
|
||||
import { OrganizationSwitcher, UserButton } from "@clerk/nextjs";
|
||||
import { Plus } from 'lucide-react';
|
||||
import { OrganizationSwitcher, UserButton } from '@clerk/nextjs';
|
||||
|
||||
import { Logo } from "@/components/logo";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { FormPopover } from "@/components/form/form-popover";
|
||||
import { Logo } from '@/components/logo';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { FormPopover } from '@/components/form/form-popover';
|
||||
|
||||
import { MobileSidebar } from "./mobile-sidebar";
|
||||
import { MobileSidebar } from './mobile-sidebar';
|
||||
|
||||
export const Navbar = () => {
|
||||
return (
|
||||
<nav className="fixed z-50 top-0 px-4 w-full h-14 border-b shadow-sm bg-white flex items-center">
|
||||
<nav className='fixed top-0 z-50 flex h-14 w-full items-center border-b bg-white px-4 shadow-sm'>
|
||||
<MobileSidebar />
|
||||
<div className="flex items-center gap-x-4">
|
||||
<div className="hidden md:flex">
|
||||
<div className='flex items-center gap-x-4'>
|
||||
<div className='hidden md:flex'>
|
||||
<Logo />
|
||||
</div>
|
||||
<FormPopover align="start" side="bottom" sideOffset={18}>
|
||||
<FormPopover align='start' side='bottom' sideOffset={18}>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
className="rounded-sm hidden md:block h-auto py-1.5 px-2"
|
||||
variant='primary'
|
||||
size='sm'
|
||||
className='hidden h-auto rounded-sm px-2 py-1.5 md:block'
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
</FormPopover>
|
||||
<FormPopover>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
className="rounded-sm block md:hidden"
|
||||
variant='primary'
|
||||
size='sm'
|
||||
className='block rounded-sm md:hidden'
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
<Plus className='h-4 w-4' />
|
||||
</Button>
|
||||
</FormPopover>
|
||||
</div>
|
||||
<div className="ml-auto flex items-center gap-x-2">
|
||||
<div className='ml-auto flex items-center gap-x-2'>
|
||||
<OrganizationSwitcher
|
||||
hidePersonal
|
||||
afterCreateOrganizationUrl="/organization/:id"
|
||||
afterLeaveOrganizationUrl="/org-select"
|
||||
afterSelectOrganizationUrl="/organization/:id"
|
||||
afterCreateOrganizationUrl='/organization/:id'
|
||||
afterLeaveOrganizationUrl='/org-select'
|
||||
afterSelectOrganizationUrl='/organization/:id'
|
||||
appearance={{
|
||||
elements: {
|
||||
rootBox: {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<UserButton
|
||||
afterSignOutUrl="/"
|
||||
afterSignOutUrl='/'
|
||||
appearance={{
|
||||
elements: {
|
||||
avatarBox: {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { Menu } from "lucide-react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useMobileSidebar } from "@/hooks/use-mobile-sidebar";
|
||||
import { Menu } from 'lucide-react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useMobileSidebar } from '@/hooks/use-mobile-sidebar';
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Sheet, SheetContent } from "@/components/ui/sheet";
|
||||
import { Sidebar } from "./sidebar";
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Sheet, SheetContent } from '@/components/ui/sheet';
|
||||
import { Sidebar } from './sidebar';
|
||||
|
||||
export const MobileSidebar = () => {
|
||||
const pathname = usePathname();
|
||||
|
|
@ -33,15 +33,15 @@ export const MobileSidebar = () => {
|
|||
<>
|
||||
<Button
|
||||
onClick={onOpen}
|
||||
className="block md:hidden mr-2"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className='mr-2 block md:hidden'
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
>
|
||||
<Menu className="h-4 w-4" />
|
||||
<Menu className='h-4 w-4' />
|
||||
</Button>
|
||||
<Sheet open={isOpen} onOpenChange={onClose}>
|
||||
<SheetContent side="left" className="p-2 pt-10">
|
||||
<Sidebar storageKey="t-sidebar-mobile-state" />
|
||||
<SheetContent side='left' className='p-2 pt-10'>
|
||||
<Sidebar storageKey='t-sidebar-mobile-state' />
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import Image from "next/image";
|
||||
import { Activity, CreditCard, Layout, Settings } from "lucide-react";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import Image from 'next/image';
|
||||
import { Activity, CreditCard, Layout, Settings } from 'lucide-react';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
|
||||
import {
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
} from '@/components/ui/accordion';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
|
||||
export type Organization = {
|
||||
id: string;
|
||||
|
|
@ -38,23 +38,23 @@ export const NavItem = ({
|
|||
|
||||
const routes = [
|
||||
{
|
||||
label: "Boards",
|
||||
icon: <Layout className="h-4 w-4 mr-2" />,
|
||||
label: 'Boards',
|
||||
icon: <Layout className='mr-2 h-4 w-4' />,
|
||||
href: `/organization/${organization.id}`,
|
||||
},
|
||||
{
|
||||
label: "Activity",
|
||||
icon: <Activity className="h-4 w-4 mr-2" />,
|
||||
label: 'Activity',
|
||||
icon: <Activity className='mr-2 h-4 w-4' />,
|
||||
href: `/organization/${organization.id}/activity`,
|
||||
},
|
||||
{
|
||||
label: "Settings",
|
||||
icon: <Settings className="h-4 w-4 mr-2" />,
|
||||
label: 'Settings',
|
||||
icon: <Settings className='mr-2 h-4 w-4' />,
|
||||
href: `/organization/${organization.id}/settings`,
|
||||
},
|
||||
{
|
||||
label: "Billing",
|
||||
icon: <CreditCard className="h-4 w-4 mr-2" />,
|
||||
label: 'Billing',
|
||||
icon: <CreditCard className='mr-2 h-4 w-4' />,
|
||||
href: `/organization/${organization.id}/billing`,
|
||||
},
|
||||
];
|
||||
|
|
@ -64,37 +64,37 @@ export const NavItem = ({
|
|||
};
|
||||
|
||||
return (
|
||||
<AccordionItem value={organization.id} className="border-none">
|
||||
<AccordionItem value={organization.id} className='border-none'>
|
||||
<AccordionTrigger
|
||||
onClick={() => onExpand(organization.id)}
|
||||
className={cn(
|
||||
"flex items-center gap-x-2 p-1.5 text-neutral-700 rounded-md hover:bg-neutral-500/10 transition text-start no-underline hover:no-underline",
|
||||
isActive && !isExpanded && "bg-sky-500/10 text-sky-700"
|
||||
'flex items-center gap-x-2 rounded-md p-1.5 text-start text-neutral-700 no-underline transition hover:bg-neutral-500/10 hover:no-underline',
|
||||
isActive && !isExpanded && 'bg-sky-500/10 text-sky-700'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-x-2">
|
||||
<div className="w-7 h-7 relative">
|
||||
<div className='flex items-center gap-x-2'>
|
||||
<div className='relative h-7 w-7'>
|
||||
<Image
|
||||
fill
|
||||
src={organization.imageUrl}
|
||||
alt={organization.name}
|
||||
className="rounded-sm object-cover"
|
||||
className='rounded-sm object-cover'
|
||||
/>
|
||||
</div>
|
||||
<span className="font-medium text-sm">{organization.name}</span>
|
||||
<span className='text-sm font-medium'>{organization.name}</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="pt-1 text-neutral-700">
|
||||
<AccordionContent className='pt-1 text-neutral-700'>
|
||||
{routes.map((route) => (
|
||||
<Button
|
||||
key={route.href}
|
||||
size="sm"
|
||||
size='sm'
|
||||
onClick={() => onClick(route.href)}
|
||||
className={cn(
|
||||
"w-full font-normal justify-start pl-10 mb-1",
|
||||
pathname === route.href && "bg-sky-500/10 text-sky-700"
|
||||
'mb-1 w-full justify-start pl-10 font-normal',
|
||||
pathname === route.href && 'bg-sky-500/10 text-sky-700'
|
||||
)}
|
||||
variant="ghost"
|
||||
variant='ghost'
|
||||
>
|
||||
{route.icon}
|
||||
{route.label}
|
||||
|
|
@ -107,11 +107,11 @@ export const NavItem = ({
|
|||
|
||||
NavItem.Skeleton = function SkeletonNavItem() {
|
||||
return (
|
||||
<div className="flex items-center gap-x-2">
|
||||
<div className="w-10 h-10 relative shrink-0">
|
||||
<Skeleton className="h-full w-full absolute" />
|
||||
<div className='flex items-center gap-x-2'>
|
||||
<div className='relative h-10 w-10 shrink-0'>
|
||||
<Skeleton className='absolute h-full w-full' />
|
||||
</div>
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className='h-4 w-full' />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import Link from "next/link";
|
||||
import { Plus } from "lucide-react";
|
||||
import { useLocalStorage } from "usehooks-ts";
|
||||
import { useOrganizationList, useOrganization } from "@clerk/nextjs";
|
||||
import Link from 'next/link';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { useLocalStorage } from 'usehooks-ts';
|
||||
import { useOrganizationList, useOrganization } from '@clerk/nextjs';
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Accordion } from "@/components/ui/accordion";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { NavItem, Organization } from "./nav-item";
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Accordion } from '@/components/ui/accordion';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { NavItem, Organization } from './nav-item';
|
||||
|
||||
interface SidebarProps {
|
||||
storageKey?: string;
|
||||
}
|
||||
|
||||
export const Sidebar = ({ storageKey = "t-sidebar-state" }: SidebarProps) => {
|
||||
export const Sidebar = ({ storageKey = 't-sidebar-state' }: SidebarProps) => {
|
||||
const [expanded, setExpanded] = useLocalStorage<Record<string, any>>(
|
||||
storageKey,
|
||||
{}
|
||||
|
|
@ -46,11 +46,11 @@ export const Sidebar = ({ storageKey = "t-sidebar-state" }: SidebarProps) => {
|
|||
if (!isLoadedOrgList || !isLoadedOrg || userMemberships.isLoading) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<Skeleton className="h-10 w-[50%]" />
|
||||
<Skeleton className="h-10 w-10" />
|
||||
<div className='mb-2 flex items-center justify-between'>
|
||||
<Skeleton className='h-10 w-[50%]' />
|
||||
<Skeleton className='h-10 w-10' />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className='space-y-2'>
|
||||
<NavItem.Skeleton />
|
||||
<NavItem.Skeleton />
|
||||
<NavItem.Skeleton />
|
||||
|
|
@ -61,24 +61,24 @@ export const Sidebar = ({ storageKey = "t-sidebar-state" }: SidebarProps) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="font-medium text-xs flex items-center mb-1">
|
||||
<span className="pl-4">Workspaces</span>
|
||||
<div className='mb-1 flex items-center text-xs font-medium'>
|
||||
<span className='pl-4'>Workspaces</span>
|
||||
<Button
|
||||
asChild
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="ml-auto"
|
||||
type='button'
|
||||
size='icon'
|
||||
variant='ghost'
|
||||
className='ml-auto'
|
||||
>
|
||||
<Link href="/select-org">
|
||||
<Plus className="h-4 w-4" />
|
||||
<Link href='/select-org'>
|
||||
<Plus className='h-4 w-4' />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<Accordion
|
||||
type="multiple"
|
||||
type='multiple'
|
||||
defaultValue={defaultAccordionValue}
|
||||
className="space-y-2"
|
||||
className='space-y-2'
|
||||
>
|
||||
{userMemberships.data.map(({ organization }) => (
|
||||
<NavItem
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Board } from "@prisma/client";
|
||||
import { Board } from '@prisma/client';
|
||||
|
||||
import { BoardTitleForm } from "./board-title-form";
|
||||
import { BoardOptions } from "./board-options";
|
||||
import { BoardTitleForm } from './board-title-form';
|
||||
import { BoardOptions } from './board-options';
|
||||
|
||||
interface BoardNavbarProps {
|
||||
data: Board;
|
||||
|
|
@ -9,9 +9,9 @@ interface BoardNavbarProps {
|
|||
|
||||
export const BoardNavbar = async ({ data }: BoardNavbarProps) => {
|
||||
return (
|
||||
<div className="w-full h-14 z-[40] bg-black/50 fixed top-14 flex items-center px-6 gap-x-4 text-white">
|
||||
<div className='fixed top-14 z-[40] flex h-14 w-full items-center gap-x-4 bg-black/50 px-6 text-white'>
|
||||
<BoardTitleForm data={data} />
|
||||
<div className="ml-auto">
|
||||
<div className='ml-auto'>
|
||||
<BoardOptions id={data.id} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { MoreHorizontal, X } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { MoreHorizontal, X } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { deleteBoard } from "@/actions/delete-board";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { deleteBoard } from '@/actions/delete-board';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Popover,
|
||||
PopoverClose,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
} from '@/components/ui/popover';
|
||||
|
||||
interface BoardOptionsProps {
|
||||
id: string;
|
||||
|
|
@ -31,27 +31,27 @@ export const BoardOptions = ({ id }: BoardOptionsProps) => {
|
|||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button className="h-auto w-auto p-2" variant="transparent">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
<Button className='h-auto w-auto p-2' variant='transparent'>
|
||||
<MoreHorizontal className='h-4 w-4' />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="px-0 pt-3 pb-3" side="bottom" align="start">
|
||||
<div className="text-sm font-medium text-center text-neutral-600 pb-4">
|
||||
<PopoverContent className='px-0 pb-3 pt-3' side='bottom' align='start'>
|
||||
<div className='pb-4 text-center text-sm font-medium text-neutral-600'>
|
||||
Board Actions
|
||||
</div>
|
||||
<PopoverClose asChild>
|
||||
<Button
|
||||
className="h-auto w-auto p-2 absolute top-2 right-2 text-neutral-600"
|
||||
variant="ghost"
|
||||
className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600'
|
||||
variant='ghost'
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<X className='h-4 w-4' />
|
||||
</Button>
|
||||
</PopoverClose>
|
||||
<Button
|
||||
variant="ghost"
|
||||
variant='ghost'
|
||||
onClick={onDelete}
|
||||
disabled={isLoading}
|
||||
className="rounded-none w-full h-auto p-2 px-5 justify-start font-normal text-sm text-destructive hover:text-destructive"
|
||||
className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-destructive hover:text-destructive'
|
||||
>
|
||||
Delete this board
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { toast } from "sonner";
|
||||
import { ElementRef, useRef, useState } from "react";
|
||||
import { Board } from "@prisma/client";
|
||||
import { toast } from 'sonner';
|
||||
import { ElementRef, useRef, useState } from 'react';
|
||||
import { Board } from '@prisma/client';
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { FormInput } from "@/components/form/form-input";
|
||||
import { updateBoard } from "@/actions/update-board";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { FormInput } from '@/components/form/form-input';
|
||||
import { updateBoard } from '@/actions/update-board';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
|
||||
interface BoardTitleFormProps {
|
||||
data: Board;
|
||||
|
|
@ -25,8 +25,8 @@ export const BoardTitleForm = ({ data }: BoardTitleFormProps) => {
|
|||
},
|
||||
});
|
||||
|
||||
const formRef = useRef<ElementRef<"form">>(null);
|
||||
const inputRef = useRef<ElementRef<"input">>(null);
|
||||
const formRef = useRef<ElementRef<'form'>>(null);
|
||||
const inputRef = useRef<ElementRef<'input'>>(null);
|
||||
|
||||
const [title, setTitle] = useState(data.title);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
|
@ -44,7 +44,7 @@ export const BoardTitleForm = ({ data }: BoardTitleFormProps) => {
|
|||
};
|
||||
|
||||
const onSubmit = (formData: FormData) => {
|
||||
const title = formData.get("title") as string;
|
||||
const title = formData.get('title') as string;
|
||||
|
||||
execute({
|
||||
title,
|
||||
|
|
@ -61,14 +61,14 @@ export const BoardTitleForm = ({ data }: BoardTitleFormProps) => {
|
|||
<form
|
||||
action={onSubmit}
|
||||
ref={formRef}
|
||||
className="flex items-center gap-x-2"
|
||||
className='flex items-center gap-x-2'
|
||||
>
|
||||
<FormInput
|
||||
ref={inputRef}
|
||||
id="title"
|
||||
id='title'
|
||||
onBlur={onBlur}
|
||||
defaultValue={title}
|
||||
className="text-lg font-bold px-[7px] py-1 h-7 bg-transparent focus-visible:outline-none focus-visible:ring-transparent border-none"
|
||||
className='h-7 border-none bg-transparent px-[7px] py-1 text-lg font-bold focus-visible:outline-none focus-visible:ring-transparent'
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
|
|
@ -77,8 +77,8 @@ export const BoardTitleForm = ({ data }: BoardTitleFormProps) => {
|
|||
return (
|
||||
<Button
|
||||
onClick={enableEditing}
|
||||
variant="transparent"
|
||||
className="font-bold text-lg h-auto w-auto p-1 px-2"
|
||||
variant='transparent'
|
||||
className='h-auto w-auto p-1 px-2 text-lg font-bold'
|
||||
>
|
||||
{title}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { Plus, X } from "lucide-react";
|
||||
import { forwardRef, useRef, ElementRef, KeyboardEventHandler } from "react";
|
||||
import { useOnClickOutside, useEventListener } from "usehooks-ts";
|
||||
import { useParams } from "next/navigation";
|
||||
import { toast } from "sonner";
|
||||
import { Plus, X } from 'lucide-react';
|
||||
import { forwardRef, useRef, ElementRef, KeyboardEventHandler } from 'react';
|
||||
import { useOnClickOutside, useEventListener } from 'usehooks-ts';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { createCard } from "@/actions/create-card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { FormTextarea } from "@/components/form/form-textarea";
|
||||
import { FormSubmit } from "@/components/form/form-submit";
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { createCard } from '@/actions/create-card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { FormTextarea } from '@/components/form/form-textarea';
|
||||
import { FormSubmit } from '@/components/form/form-submit';
|
||||
|
||||
interface CardFormProps {
|
||||
listId: string;
|
||||
|
|
@ -22,7 +22,7 @@ interface CardFormProps {
|
|||
export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
|
||||
({ listId, isEditing, enableEditing, disableEditing }, ref) => {
|
||||
const params = useParams();
|
||||
const formRef = useRef<ElementRef<"form">>(null);
|
||||
const formRef = useRef<ElementRef<'form'>>(null);
|
||||
|
||||
const { execute, fieldErrors } = useAction(createCard, {
|
||||
onSuccess: (data) => {
|
||||
|
|
@ -35,26 +35,26 @@ export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
|
|||
});
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
if (e.key === 'Escape') {
|
||||
disableEditing();
|
||||
}
|
||||
};
|
||||
|
||||
useOnClickOutside(formRef, disableEditing);
|
||||
useEventListener("keydown", onKeyDown);
|
||||
useEventListener('keydown', onKeyDown);
|
||||
|
||||
const onTextareaKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (
|
||||
e
|
||||
) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
formRef.current?.requestSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = (formData: FormData) => {
|
||||
const title = formData.get("title") as string;
|
||||
const listId = formData.get("listId") as string;
|
||||
const title = formData.get('title') as string;
|
||||
const listId = formData.get('listId') as string;
|
||||
const boardId = params.boardId as string;
|
||||
|
||||
execute({ title, listId, boardId });
|
||||
|
|
@ -65,20 +65,20 @@ export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
|
|||
<form
|
||||
ref={formRef}
|
||||
action={onSubmit}
|
||||
className="m-1 py-0.5 px-1 space-y-4"
|
||||
className='m-1 space-y-4 px-1 py-0.5'
|
||||
>
|
||||
<FormTextarea
|
||||
id="title"
|
||||
id='title'
|
||||
onKeyDown={onTextareaKeyDown}
|
||||
ref={ref}
|
||||
placeholder="Enter a title for this card..."
|
||||
placeholder='Enter a title for this card...'
|
||||
errors={fieldErrors}
|
||||
/>
|
||||
<input hidden id="listId" name="listId" value={listId} />
|
||||
<div className="flex items-center gap-x-1">
|
||||
<input hidden id='listId' name='listId' value={listId} />
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<FormSubmit>Add card</FormSubmit>
|
||||
<Button onClick={disableEditing} size="sm" variant="ghost">
|
||||
<X className="w-5 h-5" />
|
||||
<Button onClick={disableEditing} size='sm' variant='ghost'>
|
||||
<X className='h-5 w-5' />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -86,14 +86,14 @@ export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="pt-2 px-2">
|
||||
<div className='px-2 pt-2'>
|
||||
<Button
|
||||
onClick={enableEditing}
|
||||
className="h-auto px-2 py-1.5 w-full justify-start text-muted-foreground text-sm"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className='h-auto w-full justify-start px-2 py-1.5 text-sm text-muted-foreground'
|
||||
size='sm'
|
||||
variant='ghost'
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
<Plus className='mr-2 h-4 w-4' />
|
||||
Add a card
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -101,4 +101,4 @@ export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
|
|||
}
|
||||
);
|
||||
|
||||
CardForm.displayName = "CardForm";
|
||||
CardForm.displayName = 'CardForm';
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { Draggable } from "@hello-pangea/dnd";
|
||||
import { Card } from "@prisma/client";
|
||||
import { Draggable } from '@hello-pangea/dnd';
|
||||
import { Card } from '@prisma/client';
|
||||
|
||||
import { useCardModal } from "@/hooks/use-card-modal";
|
||||
import { useCardModal } from '@/hooks/use-card-modal';
|
||||
|
||||
interface CardItemProps {
|
||||
index: number;
|
||||
|
|
@ -20,9 +20,9 @@ export const CardItem = ({ index, data }: CardItemProps) => {
|
|||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
ref={provided.innerRef}
|
||||
role="button"
|
||||
role='button'
|
||||
onClick={() => cardModal.onOpen(data.id)}
|
||||
className="truncate border-2 border-transparent hover:border-black py-2 px-3 text-sm bg-white rounded-md shadow-sm"
|
||||
className='truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm hover:border-black'
|
||||
>
|
||||
{data.title}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { DragDropContext, Droppable } from "@hello-pangea/dnd";
|
||||
import { toast } from "sonner";
|
||||
import { useEffect, useState } from 'react';
|
||||
import { DragDropContext, Droppable } from '@hello-pangea/dnd';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { updateListOrder } from "@/actions/update-list-order";
|
||||
import { updateCardOrder } from "@/actions/update-card-order";
|
||||
import { ListWithCards } from "@/types";
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { updateListOrder } from '@/actions/update-list-order';
|
||||
import { updateCardOrder } from '@/actions/update-card-order';
|
||||
import { ListWithCards } from '@/types';
|
||||
|
||||
import { ListForm } from "./list-form";
|
||||
import { ListItem } from "./list-item";
|
||||
import { ListForm } from './list-form';
|
||||
import { ListItem } from './list-item';
|
||||
|
||||
interface ListContainerProps {
|
||||
data: ListWithCards[];
|
||||
|
|
@ -30,7 +30,7 @@ export const ListContainer = ({ data, boardId }: ListContainerProps) => {
|
|||
|
||||
const { execute: executeUpdateListOrder } = useAction(updateListOrder, {
|
||||
onSuccess: () => {
|
||||
toast.success("List reordered");
|
||||
toast.success('List reordered');
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(error);
|
||||
|
|
@ -39,7 +39,7 @@ export const ListContainer = ({ data, boardId }: ListContainerProps) => {
|
|||
|
||||
const { execute: executeUpdateCardOrder } = useAction(updateCardOrder, {
|
||||
onSuccess: () => {
|
||||
toast.success("Card reordered");
|
||||
toast.success('Card reordered');
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(error);
|
||||
|
|
@ -63,7 +63,7 @@ export const ListContainer = ({ data, boardId }: ListContainerProps) => {
|
|||
return;
|
||||
|
||||
// User moves a list
|
||||
if (type === "list") {
|
||||
if (type === 'list') {
|
||||
const items = reorder(orderedData, source.index, destination.index).map(
|
||||
(item, index) => ({ ...item, order: index })
|
||||
);
|
||||
|
|
@ -72,7 +72,7 @@ export const ListContainer = ({ data, boardId }: ListContainerProps) => {
|
|||
}
|
||||
|
||||
// User moves a card
|
||||
if (type === "card") {
|
||||
if (type === 'card') {
|
||||
let newOrderedData = [...orderedData];
|
||||
|
||||
// Get source and destination list
|
||||
|
|
@ -142,19 +142,19 @@ export const ListContainer = ({ data, boardId }: ListContainerProps) => {
|
|||
|
||||
return (
|
||||
<DragDropContext onDragEnd={onDragEnd}>
|
||||
<Droppable droppableId="lists" type="list" direction="horizontal">
|
||||
<Droppable droppableId='lists' type='list' direction='horizontal'>
|
||||
{(provided) => (
|
||||
<ol
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
className="flex gap-x-3 h-full"
|
||||
className='flex h-full gap-x-3'
|
||||
>
|
||||
{orderedData.map((list, index) => {
|
||||
return <ListItem key={list.id} index={index} data={list} />;
|
||||
})}
|
||||
{provided.placeholder}
|
||||
<ListForm />
|
||||
<div className="flex-shrink-0 w-1" />
|
||||
<div className='w-1 flex-shrink-0' />
|
||||
</ol>
|
||||
)}
|
||||
</Droppable>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { Plus, X } from "lucide-react";
|
||||
import { useState, useRef, ElementRef } from "react";
|
||||
import { useEventListener, useOnClickOutside } from "usehooks-ts";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { toast } from "sonner";
|
||||
import { Plus, X } from 'lucide-react';
|
||||
import { useState, useRef, ElementRef } from 'react';
|
||||
import { useEventListener, useOnClickOutside } from 'usehooks-ts';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { FormInput } from "@/components/form/form-input";
|
||||
import { FormSubmit } from "@/components/form/form-submit";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { createList } from "@/actions/create-list";
|
||||
import { FormInput } from '@/components/form/form-input';
|
||||
import { FormSubmit } from '@/components/form/form-submit';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { createList } from '@/actions/create-list';
|
||||
|
||||
import { ListWrapper } from "./list-wrapper";
|
||||
import { ListWrapper } from './list-wrapper';
|
||||
|
||||
export const ListForm = () => {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
|
||||
const formRef = useRef<ElementRef<"form">>(null);
|
||||
const inputRef = useRef<ElementRef<"input">>(null);
|
||||
const formRef = useRef<ElementRef<'form'>>(null);
|
||||
const inputRef = useRef<ElementRef<'input'>>(null);
|
||||
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
|
|
@ -46,17 +46,17 @@ export const ListForm = () => {
|
|||
});
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
if (e.key === 'Escape') {
|
||||
disableEditing();
|
||||
}
|
||||
};
|
||||
|
||||
useEventListener("keydown", onKeyDown);
|
||||
useEventListener('keydown', onKeyDown);
|
||||
useOnClickOutside(formRef, disableEditing);
|
||||
|
||||
const onSubmit = (formData: FormData) => {
|
||||
const title = formData.get("title") as string;
|
||||
const boardId = formData.get("boardId") as string;
|
||||
const title = formData.get('title') as string;
|
||||
const boardId = formData.get('boardId') as string;
|
||||
|
||||
execute({ title, boardId });
|
||||
};
|
||||
|
|
@ -67,20 +67,20 @@ export const ListForm = () => {
|
|||
<form
|
||||
action={onSubmit}
|
||||
ref={formRef}
|
||||
className="w-full p-3 rounded-md bg-white space-y-4 shadow-md"
|
||||
className='w-full space-y-4 rounded-md bg-white p-3 shadow-md'
|
||||
>
|
||||
<FormInput
|
||||
ref={inputRef}
|
||||
errors={fieldErrors}
|
||||
id="title"
|
||||
className="text-sm px-2 py-1 h-7 font-medium border-transparent hover:border-input focus:border-input transition"
|
||||
placeholder="Enter list title..."
|
||||
id='title'
|
||||
className='h-7 border-transparent px-2 py-1 text-sm font-medium transition hover:border-input focus:border-input'
|
||||
placeholder='Enter list title...'
|
||||
/>
|
||||
<input hidden value={params.boardId} name="boardId" />
|
||||
<div className="flex items-center gap-x-1">
|
||||
<input hidden value={params.boardId} name='boardId' />
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<FormSubmit>Add list</FormSubmit>
|
||||
<Button onClick={disableEditing} size="sm" variant="ghost">
|
||||
<X className="h-5 w-5" />
|
||||
<Button onClick={disableEditing} size='sm' variant='ghost'>
|
||||
<X className='h-5 w-5' />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -92,9 +92,9 @@ export const ListForm = () => {
|
|||
<ListWrapper>
|
||||
<button
|
||||
onClick={enableEditing}
|
||||
className="w-full rounded-md bg-white/80 hover:bg-white/50 transition p-3 flex items-center font-medium text-sm"
|
||||
className='flex w-full items-center rounded-md bg-white/80 p-3 text-sm font-medium transition hover:bg-white/50'
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
<Plus className='mr-2 h-4 w-4' />
|
||||
Add a list
|
||||
</button>
|
||||
</ListWrapper>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useState, useRef, ElementRef } from "react";
|
||||
import { useEventListener } from "usehooks-ts";
|
||||
import { List } from "@prisma/client";
|
||||
import { toast } from "sonner";
|
||||
import { useState, useRef, ElementRef } from 'react';
|
||||
import { useEventListener } from 'usehooks-ts';
|
||||
import { List } from '@prisma/client';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { FormInput } from "@/components/form/form-input";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { updateList } from "@/actions/update-list";
|
||||
import { FormInput } from '@/components/form/form-input';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { updateList } from '@/actions/update-list';
|
||||
|
||||
import { ListOptions } from "./list-options";
|
||||
import { ListOptions } from './list-options';
|
||||
|
||||
interface ListHeaderProps {
|
||||
data: List;
|
||||
|
|
@ -20,8 +20,8 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
|
|||
const [title, setTitle] = useState(data.title);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
const formRef = useRef<ElementRef<"form">>(null);
|
||||
const inputRef = useRef<ElementRef<"input">>(null);
|
||||
const formRef = useRef<ElementRef<'form'>>(null);
|
||||
const inputRef = useRef<ElementRef<'input'>>(null);
|
||||
|
||||
const enableEditing = () => {
|
||||
setIsEditing(true);
|
||||
|
|
@ -47,9 +47,9 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
|
|||
});
|
||||
|
||||
const onSubmit = (formData: FormData) => {
|
||||
const title = formData.get("title") as string;
|
||||
const id = formData.get("id") as string;
|
||||
const boardId = formData.get("boardId") as string;
|
||||
const title = formData.get('title') as string;
|
||||
const id = formData.get('id') as string;
|
||||
const boardId = formData.get('boardId') as string;
|
||||
|
||||
if (title === data.title) return disableEditing();
|
||||
|
||||
|
|
@ -57,7 +57,7 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
|
|||
};
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
if (e.key === 'Escape') {
|
||||
formRef.current?.requestSubmit();
|
||||
}
|
||||
};
|
||||
|
|
@ -66,28 +66,28 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
|
|||
formRef.current?.requestSubmit();
|
||||
};
|
||||
|
||||
useEventListener("keydown", onKeyDown);
|
||||
useEventListener('keydown', onKeyDown);
|
||||
|
||||
return (
|
||||
<div className="pt-2 px-2 text-sm font-semibold flex justify-between items-start gap-x-2">
|
||||
<div className='flex items-start justify-between gap-x-2 px-2 pt-2 text-sm font-semibold'>
|
||||
{isEditing ? (
|
||||
<form ref={formRef} action={onSubmit} className="flex-1 px-[2px]">
|
||||
<input hidden id="id" name="id" value={data.id} />
|
||||
<input hidden id="boardId" name="boardId" value={data.boardId} />
|
||||
<form ref={formRef} action={onSubmit} className='flex-1 px-[2px]'>
|
||||
<input hidden id='id' name='id' value={data.id} />
|
||||
<input hidden id='boardId' name='boardId' value={data.boardId} />
|
||||
<FormInput
|
||||
ref={inputRef}
|
||||
onBlur={onBlur}
|
||||
id="title"
|
||||
placeholder="Enter list title..."
|
||||
id='title'
|
||||
placeholder='Enter list title...'
|
||||
defaultValue={title}
|
||||
className="text-sm px-[7px] py-1 h-7 font-medium border-transparent hover:border-input focus:border-input transition truncate bg-transparent focus:bg-white"
|
||||
className='h-7 truncate border-transparent bg-transparent px-[7px] py-1 text-sm font-medium transition hover:border-input focus:border-input focus:bg-white'
|
||||
/>
|
||||
<button hidden type="submit" />
|
||||
<button hidden type='submit' />
|
||||
</form>
|
||||
) : (
|
||||
<div
|
||||
onClick={enableEditing}
|
||||
className="w-full text-sm px-2.5 py-1 h-7 font-medium border-transparent"
|
||||
className='h-7 w-full border-transparent px-2.5 py-1 text-sm font-medium'
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { ElementRef, useRef, useState } from "react";
|
||||
import { Draggable, Droppable } from "@hello-pangea/dnd";
|
||||
import { ElementRef, useRef, useState } from 'react';
|
||||
import { Draggable, Droppable } from '@hello-pangea/dnd';
|
||||
|
||||
import { ListWithCards } from "@/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ListWithCards } from '@/types';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
import { ListHeader } from "./list-header";
|
||||
import { CardForm } from "./card-form";
|
||||
import { CardItem } from "./card-item";
|
||||
import { ListHeader } from './list-header';
|
||||
import { CardForm } from './card-form';
|
||||
import { CardItem } from './card-item';
|
||||
|
||||
interface ListItemProps {
|
||||
data: ListWithCards;
|
||||
|
|
@ -16,7 +16,7 @@ interface ListItemProps {
|
|||
}
|
||||
|
||||
export const ListItem = ({ index, data }: ListItemProps) => {
|
||||
const textareaRef = useRef<ElementRef<"textarea">>(null);
|
||||
const textareaRef = useRef<ElementRef<'textarea'>>(null);
|
||||
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
|
|
@ -37,21 +37,21 @@ export const ListItem = ({ index, data }: ListItemProps) => {
|
|||
<li
|
||||
{...provided.draggableProps}
|
||||
ref={provided.innerRef}
|
||||
className="shrink-0 h-full w-[272px] select-none"
|
||||
className='h-full w-[272px] shrink-0 select-none'
|
||||
>
|
||||
<div
|
||||
{...provided.dragHandleProps}
|
||||
className="w-full rounded-md bg-[#f1f2f4] shadow-md pb-2"
|
||||
className='w-full rounded-md bg-[#f1f2f4] pb-2 shadow-md'
|
||||
>
|
||||
<ListHeader onAddCard={enableEditing} data={data} />
|
||||
<Droppable droppableId={data.id} type="card">
|
||||
<Droppable droppableId={data.id} type='card'>
|
||||
{(provided) => (
|
||||
<ol
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}
|
||||
className={cn(
|
||||
"mx-1 px-1 py-0.5 flex flex-col gap-y-2",
|
||||
data.cards.length > 0 ? "mt-2" : "mt-0"
|
||||
'mx-1 flex flex-col gap-y-2 px-1 py-0.5',
|
||||
data.cards.length > 0 ? 'mt-2' : 'mt-0'
|
||||
)}
|
||||
>
|
||||
{data.cards.map((card, index) => (
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { MoreHorizontal, X } from "lucide-react";
|
||||
import { ElementRef, useRef } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { List } from "@prisma/client";
|
||||
import { MoreHorizontal, X } from 'lucide-react';
|
||||
import { ElementRef, useRef } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { List } from '@prisma/client';
|
||||
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
PopoverClose,
|
||||
} from "@/components/ui/popover";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { FormSubmit } from "@/components/form/form-submit";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { deleteList } from "@/actions/delete-list";
|
||||
import { copyList } from "@/actions/copy-list";
|
||||
} from '@/components/ui/popover';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { FormSubmit } from '@/components/form/form-submit';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { deleteList } from '@/actions/delete-list';
|
||||
import { copyList } from '@/actions/copy-list';
|
||||
|
||||
interface ListOptionsProps {
|
||||
data: List;
|
||||
|
|
@ -24,7 +24,7 @@ interface ListOptionsProps {
|
|||
}
|
||||
|
||||
export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
|
||||
const closeRef = useRef<ElementRef<"button">>(null);
|
||||
const closeRef = useRef<ElementRef<'button'>>(null);
|
||||
|
||||
const { execute: executeDelete } = useAction(deleteList, {
|
||||
onSuccess: () => {
|
||||
|
|
@ -47,15 +47,15 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
|
|||
});
|
||||
|
||||
const onDelete = (formData: FormData) => {
|
||||
const id = formData.get("id") as string;
|
||||
const boardId = formData.get("boardId") as string;
|
||||
const id = formData.get('id') as string;
|
||||
const boardId = formData.get('boardId') as string;
|
||||
|
||||
executeDelete({ id, boardId });
|
||||
};
|
||||
|
||||
const onCopy = (formData: FormData) => {
|
||||
const id = formData.get("id") as string;
|
||||
const boardId = formData.get("boardId") as string;
|
||||
const id = formData.get('id') as string;
|
||||
const boardId = formData.get('boardId') as string;
|
||||
|
||||
executeCopy({ id, boardId });
|
||||
};
|
||||
|
|
@ -63,46 +63,46 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
|
|||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button className="h-auto w-auto p-2" variant="ghost">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
<Button className='h-auto w-auto p-2' variant='ghost'>
|
||||
<MoreHorizontal className='h-4 w-4' />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="px-0 pt-3 pb-3" side="bottom" align="start">
|
||||
<div className="text-sm font-medium text-center text-neutral-600 pb-4">
|
||||
<PopoverContent className='px-0 pb-3 pt-3' side='bottom' align='start'>
|
||||
<div className='pb-4 text-center text-sm font-medium text-neutral-600'>
|
||||
List Actions
|
||||
</div>
|
||||
<PopoverClose ref={closeRef} asChild>
|
||||
<Button
|
||||
className="h-auto w-auto p-2 absolute top-2 right-2 text-neutral-600"
|
||||
variant="ghost"
|
||||
className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600'
|
||||
variant='ghost'
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<X className='h-4 w-4' />
|
||||
</Button>
|
||||
</PopoverClose>
|
||||
<Button
|
||||
onClick={onAddCard}
|
||||
className="rounded-none w-full h-auto p-2 px-5 justify-start font-normal text-sm"
|
||||
variant="ghost"
|
||||
className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal'
|
||||
variant='ghost'
|
||||
>
|
||||
Add card...
|
||||
</Button>
|
||||
<form action={onCopy}>
|
||||
<input hidden name="id" id="id" value={data.id} />
|
||||
<input hidden name="boardId" id="boardId" value={data.boardId} />
|
||||
<input hidden name='id' id='id' value={data.id} />
|
||||
<input hidden name='boardId' id='boardId' value={data.boardId} />
|
||||
<FormSubmit
|
||||
className="rounded-none w-full h-auto p-2 px-5 justify-start font-normal text-sm"
|
||||
variant="ghost"
|
||||
className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal'
|
||||
variant='ghost'
|
||||
>
|
||||
Copy list...
|
||||
</FormSubmit>
|
||||
</form>
|
||||
<Separator />
|
||||
<form action={onDelete}>
|
||||
<input hidden name="id" id="id" value={data.id} />
|
||||
<input hidden name="boardId" id="boardId" value={data.boardId} />
|
||||
<input hidden name='id' id='id' value={data.id} />
|
||||
<input hidden name='boardId' id='boardId' value={data.boardId} />
|
||||
<FormSubmit
|
||||
className="rounded-none w-full h-auto p-2 px-5 justify-start font-normal text-sm text-destructive hover:text-destructive"
|
||||
variant="ghost"
|
||||
className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-destructive hover:text-destructive'
|
||||
variant='ghost'
|
||||
>
|
||||
Delete this list
|
||||
</FormSubmit>
|
||||
|
|
|
|||
|
|
@ -3,5 +3,5 @@ interface ListWrapperProps {
|
|||
}
|
||||
|
||||
export const ListWrapper = ({ children }: ListWrapperProps) => {
|
||||
return <li className="shrink-0 h-full w-[272px] select-none">{children}</li>;
|
||||
return <li className='h-full w-[272px] shrink-0 select-none'>{children}</li>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { auth } from "@clerk/nextjs";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { auth } from '@clerk/nextjs';
|
||||
import { notFound, redirect } from 'next/navigation';
|
||||
|
||||
import { db } from "@/lib/db";
|
||||
import { BoardNavbar } from "./_components/board-navbar";
|
||||
import { db } from '@/lib/db';
|
||||
import { BoardNavbar } from './_components/board-navbar';
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
|
|
@ -11,7 +11,7 @@ export async function generateMetadata({
|
|||
}) {
|
||||
const { orgId } = auth();
|
||||
|
||||
if (!orgId) return { title: "Board" };
|
||||
if (!orgId) return { title: 'Board' };
|
||||
|
||||
const board = await db.board.findUnique({
|
||||
where: {
|
||||
|
|
@ -21,7 +21,7 @@ export async function generateMetadata({
|
|||
});
|
||||
|
||||
return {
|
||||
title: board?.title ?? "Board",
|
||||
title: board?.title ?? 'Board',
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ const BoardIdLayout = async ({
|
|||
}) => {
|
||||
const { orgId } = auth();
|
||||
|
||||
if (!orgId) redirect("/select-org");
|
||||
if (!orgId) redirect('/select-org');
|
||||
|
||||
const board = await db.board.findUnique({
|
||||
where: {
|
||||
|
|
@ -47,12 +47,12 @@ const BoardIdLayout = async ({
|
|||
|
||||
return (
|
||||
<div
|
||||
className="relative h-full bg-no-repeat bg-cover bg-center"
|
||||
className='relative h-full bg-cover bg-center bg-no-repeat'
|
||||
style={{ backgroundImage: `url(${board.imageFullUrl})` }}
|
||||
>
|
||||
<BoardNavbar data={board} />
|
||||
<div className="absolute inset-0 bg-black/10" />
|
||||
<main className="relative pt-28 h-full">{children}</main>
|
||||
<div className='absolute inset-0 bg-black/10' />
|
||||
<main className='relative h-full pt-28'>{children}</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { auth } from "@clerk/nextjs";
|
||||
import { redirect } from "next/navigation";
|
||||
import { auth } from '@clerk/nextjs';
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
import { db } from "@/lib/db";
|
||||
import { ListContainer } from "./_components/list-container";
|
||||
import { db } from '@/lib/db';
|
||||
import { ListContainer } from './_components/list-container';
|
||||
|
||||
interface BoardIdPageProps {
|
||||
params: {
|
||||
|
|
@ -14,7 +14,7 @@ const BoardIdPage = async ({ params }: BoardIdPageProps) => {
|
|||
const { orgId } = auth();
|
||||
|
||||
if (!orgId) {
|
||||
redirect("/select-org");
|
||||
redirect('/select-org');
|
||||
}
|
||||
|
||||
const lists = await db.list.findMany({
|
||||
|
|
@ -27,20 +27,20 @@ const BoardIdPage = async ({ params }: BoardIdPageProps) => {
|
|||
include: {
|
||||
cards: {
|
||||
orderBy: {
|
||||
order: "asc",
|
||||
order: 'asc',
|
||||
},
|
||||
},
|
||||
},
|
||||
orderBy: {
|
||||
order: "asc",
|
||||
order: 'asc',
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="p-4 h-full overflow-x-auto">
|
||||
<div className='h-full overflow-x-auto p-4'>
|
||||
<ListContainer boardId={params.boardId} data={lists} />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export default BoardIdPage;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { Navbar } from "./_components/Navbar";
|
||||
import { Navbar } from './_components/Navbar';
|
||||
|
||||
const DashbordLayout = ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<div className="h-full">
|
||||
<div className='h-full'>
|
||||
<Navbar />
|
||||
{children}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import Link from "next/link";
|
||||
import { auth } from "@clerk/nextjs";
|
||||
import { redirect } from "next/navigation";
|
||||
import { HelpCircle, User2 } from "lucide-react";
|
||||
import Link from 'next/link';
|
||||
import { auth } from '@clerk/nextjs';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { HelpCircle, User2 } from 'lucide-react';
|
||||
|
||||
import { db } from "@/lib/db";
|
||||
import { Hint } from "@/components/hint";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { FormPopover } from "@/components/form/form-popover";
|
||||
import { MAX_FREE_BOARDS } from "@/constants/boards";
|
||||
import { getAvailableCount } from "@/lib/org-limit";
|
||||
import { checkSubscription } from "@/lib/subscription";
|
||||
import { db } from '@/lib/db';
|
||||
import { Hint } from '@/components/hint';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { FormPopover } from '@/components/form/form-popover';
|
||||
import { MAX_FREE_BOARDS } from '@/constants/boards';
|
||||
import { getAvailableCount } from '@/lib/org-limit';
|
||||
import { checkSubscription } from '@/lib/subscription';
|
||||
|
||||
export const BoardList = async () => {
|
||||
const { orgId } = auth();
|
||||
|
||||
if (!orgId) {
|
||||
return redirect("/select-org");
|
||||
return redirect('/select-org');
|
||||
}
|
||||
|
||||
const boards = await db.board.findMany({
|
||||
|
|
@ -23,7 +23,7 @@ export const BoardList = async () => {
|
|||
orgId,
|
||||
},
|
||||
orderBy: {
|
||||
createdAt: "desc",
|
||||
createdAt: 'desc',
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -31,32 +31,32 @@ export const BoardList = async () => {
|
|||
const isPro = await checkSubscription();
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center font-semibold text-lg text-neutral-700">
|
||||
<User2 className="h-6 w-6 mr-2" />
|
||||
<div className='space-y-4'>
|
||||
<div className='flex items-center text-lg font-semibold text-neutral-700'>
|
||||
<User2 className='mr-2 h-6 w-6' />
|
||||
Your boards
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
<div className='grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4'>
|
||||
{boards.map((board) => (
|
||||
<Link
|
||||
key={board.id}
|
||||
href={`/board/${board.id}`}
|
||||
className="group relative aspect-video bg-no-repeat bg-center bg-cover bg-sky-700 rounded-sm h-full w-full p-2 overflow-hidden"
|
||||
className='group relative aspect-video h-full w-full overflow-hidden rounded-sm bg-sky-700 bg-cover bg-center bg-no-repeat p-2'
|
||||
style={{ backgroundImage: `url(${board.imageThumbUrl})` }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-black/30 group-hover:bg-black/40 transition" />
|
||||
<p className="relative font-semibold text-white">{board.title}</p>
|
||||
<div className='absolute inset-0 bg-black/30 transition group-hover:bg-black/40' />
|
||||
<p className='relative font-semibold text-white'>{board.title}</p>
|
||||
</Link>
|
||||
))}
|
||||
<FormPopover sideOffset={10} side="right">
|
||||
<FormPopover sideOffset={10} side='right'>
|
||||
<div
|
||||
role="button"
|
||||
className="aspect-video relative h-full w-full bg-muted rounded-sm flex flex-col gap-y-1 items-center justify-center hover:opacity-75 transition"
|
||||
role='button'
|
||||
className='relative flex aspect-video h-full w-full flex-col items-center justify-center gap-y-1 rounded-sm bg-muted transition hover:opacity-75'
|
||||
>
|
||||
<p className="text-sm">Create new board</p>
|
||||
<span className="text-xs">
|
||||
<p className='text-sm'>Create new board</p>
|
||||
<span className='text-xs'>
|
||||
{isPro
|
||||
? "Unlimited"
|
||||
? 'Unlimited'
|
||||
: `${MAX_FREE_BOARDS - availableCount} remaining`}
|
||||
</span>
|
||||
<Hint
|
||||
|
|
@ -65,7 +65,7 @@ export const BoardList = async () => {
|
|||
Free Workspaces can have up to 5 open boards. For unlimited boards upgrade this workspace.
|
||||
`}
|
||||
>
|
||||
<HelpCircle className="absolute bottom-2 right-2 h-[14px] w-[14px]" />
|
||||
<HelpCircle className='absolute bottom-2 right-2 h-[14px] w-[14px]' />
|
||||
</Hint>
|
||||
</div>
|
||||
</FormPopover>
|
||||
|
|
@ -76,15 +76,15 @@ export const BoardList = async () => {
|
|||
|
||||
BoardList.Skeleton = function SkeletonBoardList() {
|
||||
return (
|
||||
<div className="grid gird-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
<Skeleton className="aspect-video h-full w-full p-2" />
|
||||
<Skeleton className="aspect-video h-full w-full p-2" />
|
||||
<Skeleton className="aspect-video h-full w-full p-2" />
|
||||
<Skeleton className="aspect-video h-full w-full p-2" />
|
||||
<Skeleton className="aspect-video h-full w-full p-2" />
|
||||
<Skeleton className="aspect-video h-full w-full p-2" />
|
||||
<Skeleton className="aspect-video h-full w-full p-2" />
|
||||
<Skeleton className="aspect-video h-full w-full p-2" />
|
||||
<div className='gird-cols-2 grid gap-4 sm:grid-cols-3 lg:grid-cols-4'>
|
||||
<Skeleton className='aspect-video h-full w-full p-2' />
|
||||
<Skeleton className='aspect-video h-full w-full p-2' />
|
||||
<Skeleton className='aspect-video h-full w-full p-2' />
|
||||
<Skeleton className='aspect-video h-full w-full p-2' />
|
||||
<Skeleton className='aspect-video h-full w-full p-2' />
|
||||
<Skeleton className='aspect-video h-full w-full p-2' />
|
||||
<Skeleton className='aspect-video h-full w-full p-2' />
|
||||
<Skeleton className='aspect-video h-full w-full p-2' />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import Image from "next/image";
|
||||
import { CreditCard } from "lucide-react";
|
||||
import Image from 'next/image';
|
||||
import { CreditCard } from 'lucide-react';
|
||||
|
||||
import { useOrganization } from "@clerk/nextjs";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { useOrganization } from '@clerk/nextjs';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
|
||||
interface InfoProps {
|
||||
isPro: boolean;
|
||||
|
|
@ -18,20 +18,20 @@ export const Info = ({ isPro }: InfoProps) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-x-4">
|
||||
<div className="w-[60px] h-[60px] relative">
|
||||
<div className='flex items-center gap-x-4'>
|
||||
<div className='relative h-[60px] w-[60px]'>
|
||||
<Image
|
||||
fill
|
||||
src={organization?.imageUrl!}
|
||||
alt="Organization Logo"
|
||||
className="rounded-md object-cover"
|
||||
alt='Organization Logo'
|
||||
className='rounded-md object-cover'
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="font-semibold text-xl">{organization?.name}</p>
|
||||
<div className="flex items-center text-xs text-muted-foreground">
|
||||
<CreditCard className="h-3 w-3 mr-1" />
|
||||
{isPro ? "Pro" : "Free"}
|
||||
<div className='space-y-1'>
|
||||
<p className='text-xl font-semibold'>{organization?.name}</p>
|
||||
<div className='flex items-center text-xs text-muted-foreground'>
|
||||
<CreditCard className='mr-1 h-3 w-3' />
|
||||
{isPro ? 'Pro' : 'Free'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,15 +40,15 @@ export const Info = ({ isPro }: InfoProps) => {
|
|||
|
||||
Info.Skeleton = function SkeletonInfo() {
|
||||
return (
|
||||
<div className="flex items-center gap-x-4">
|
||||
<div className="w-[60px] h-[60px] relative">
|
||||
<Skeleton className="w-full h-full absolute" />
|
||||
<div className='flex items-center gap-x-4'>
|
||||
<div className='relative h-[60px] w-[60px]'>
|
||||
<Skeleton className='absolute h-full w-full' />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-10 w-[200px]" />
|
||||
<div className="flex items-center">
|
||||
<Skeleton className="h-4 w-4 mr-2" />
|
||||
<Skeleton className="h-4 w-[100px]" />
|
||||
<div className='space-y-2'>
|
||||
<Skeleton className='h-10 w-[200px]' />
|
||||
<div className='flex items-center'>
|
||||
<Skeleton className='mr-2 h-4 w-4' />
|
||||
<Skeleton className='h-4 w-[100px]' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useOrganizationList } from "@clerk/nextjs";
|
||||
import { useEffect } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { useOrganizationList } from '@clerk/nextjs';
|
||||
|
||||
export const OrgControl = () => {
|
||||
const params = useParams();
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
import { auth } from "@clerk/nextjs";
|
||||
import { redirect } from "next/navigation";
|
||||
import { auth } from '@clerk/nextjs';
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
import { db } from "@/lib/db";
|
||||
import { ActivityItem } from "@/components/activity-item";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { db } from '@/lib/db';
|
||||
import { ActivityItem } from '@/components/activity-item';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
|
||||
export const ActivityList = async () => {
|
||||
const { orgId } = auth();
|
||||
|
||||
if (!orgId) redirect("/select-org");
|
||||
if (!orgId) redirect('/select-org');
|
||||
|
||||
const auditLogs = await db.auditLog.findMany({
|
||||
where: {
|
||||
orgId,
|
||||
},
|
||||
orderBy: {
|
||||
createdAt: "desc",
|
||||
createdAt: 'desc',
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<ol className="space-y-4 mt-4">
|
||||
<p className="hidden last:block text-xs text-center text-muted-foreground">
|
||||
<ol className='mt-4 space-y-4'>
|
||||
<p className='hidden text-center text-xs text-muted-foreground last:block'>
|
||||
No activity found inside this organization
|
||||
</p>
|
||||
{auditLogs.map((log) => (
|
||||
|
|
@ -33,12 +33,12 @@ export const ActivityList = async () => {
|
|||
|
||||
ActivityList.Skeleton = function ActivityListSkeleton() {
|
||||
return (
|
||||
<ol className="space-y-4 mt-4">
|
||||
<Skeleton className="w-[80%] h-14" />
|
||||
<Skeleton className="w-[50%] h-14" />
|
||||
<Skeleton className="w-[70%] h-14" />
|
||||
<Skeleton className="w-[80%] h-14" />
|
||||
<Skeleton className="w-[75%] h-14" />
|
||||
<ol className='mt-4 space-y-4'>
|
||||
<Skeleton className='h-14 w-[80%]' />
|
||||
<Skeleton className='h-14 w-[50%]' />
|
||||
<Skeleton className='h-14 w-[70%]' />
|
||||
<Skeleton className='h-14 w-[80%]' />
|
||||
<Skeleton className='h-14 w-[75%]' />
|
||||
</ol>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
import { Suspense } from "react";
|
||||
import { Suspense } from 'react';
|
||||
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
|
||||
import { Info } from "../_components/info";
|
||||
import { ActivityList } from "./_components/activity-list";
|
||||
import { checkSubscription } from "@/lib/subscription";
|
||||
import { Info } from '../_components/info';
|
||||
import { ActivityList } from './_components/activity-list';
|
||||
import { checkSubscription } from '@/lib/subscription';
|
||||
|
||||
const ActivityPage = async () => {
|
||||
const isPro = await checkSubscription();
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className='w-full'>
|
||||
<Info isPro={isPro} />
|
||||
<Separator className="my-2" />
|
||||
<Separator className='my-2' />
|
||||
<Suspense fallback={<ActivityList.Skeleton />}>
|
||||
<ActivityList />
|
||||
</Suspense>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { toast } from "sonner";
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { stripeRedirect } from "@/actions/stripe-redirect";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { useProModal } from "@/hooks/use-pro-modal";
|
||||
import { stripeRedirect } from '@/actions/stripe-redirect';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { useProModal } from '@/hooks/use-pro-modal';
|
||||
|
||||
interface SubscriptionButtonProps {
|
||||
isPro: boolean;
|
||||
|
|
@ -32,8 +32,8 @@ export const SubscriptionButton = ({ isPro }: SubscriptionButtonProps) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<Button disabled={isLoading} onClick={onClick} variant="primary">
|
||||
{isPro ? "Manage Subscription" : "Upgrade to Pro"}
|
||||
<Button disabled={isLoading} onClick={onClick} variant='primary'>
|
||||
{isPro ? 'Manage Subscription' : 'Upgrade to Pro'}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
import { checkSubscription } from "@/lib/subscription";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { checkSubscription } from '@/lib/subscription';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
|
||||
import { Info } from "../_components/info";
|
||||
import { SubscriptionButton } from "./_components/subscription-button";
|
||||
import { Info } from '../_components/info';
|
||||
import { SubscriptionButton } from './_components/subscription-button';
|
||||
|
||||
const BillingPage = async () => {
|
||||
const isPro = await checkSubscription();
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className='w-full'>
|
||||
<Info isPro={isPro} />
|
||||
<Separator className="my-2" />
|
||||
<Separator className='my-2' />
|
||||
<SubscriptionButton isPro={isPro} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BillingPage;
|
||||
export default BillingPage;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import { startCase } from "lodash";
|
||||
import { auth } from "@clerk/nextjs";
|
||||
import { startCase } from 'lodash';
|
||||
import { auth } from '@clerk/nextjs';
|
||||
|
||||
import { OrgControl } from "./_components/org-control";
|
||||
import { OrgControl } from './_components/org-control';
|
||||
|
||||
export async function generateMetadata() {
|
||||
const { orgSlug } = auth();
|
||||
|
||||
return {
|
||||
title: startCase(orgSlug ?? "organization"),
|
||||
title: startCase(orgSlug ?? 'organization'),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
import { Suspense } from "react";
|
||||
import { Suspense } from 'react';
|
||||
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { checkSubscription } from "@/lib/subscription";
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { checkSubscription } from '@/lib/subscription';
|
||||
|
||||
import { Info } from "./_components/info";
|
||||
import { BoardList } from "./_components/board-list";
|
||||
import { Info } from './_components/info';
|
||||
import { BoardList } from './_components/board-list';
|
||||
|
||||
const OrganizationIdPage = async () => {
|
||||
const isPro = await checkSubscription();
|
||||
|
||||
return (
|
||||
<div className="w-full mb-20">
|
||||
<div className='mb-20 w-full'>
|
||||
<Info isPro={isPro} />
|
||||
<Separator className="my-4" />
|
||||
<div className="px-2 md:px-4">
|
||||
<Separator className='my-4' />
|
||||
<div className='px-2 md:px-4'>
|
||||
<Suspense fallback={<BoardList.Skeleton />}>
|
||||
<BoardList />
|
||||
</Suspense>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
import { OrganizationProfile } from "@clerk/nextjs";
|
||||
import { OrganizationProfile } from '@clerk/nextjs';
|
||||
|
||||
const SettingsPage = () => {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className='w-full'>
|
||||
<OrganizationProfile
|
||||
appearance={{
|
||||
elements: {
|
||||
rootBox: {
|
||||
boxShadow: "none",
|
||||
width: "100%",
|
||||
boxShadow: 'none',
|
||||
width: '100%',
|
||||
},
|
||||
card: {
|
||||
border: "1px solid #e5e5e5",
|
||||
boxShadow: "none",
|
||||
width: "100%",
|
||||
border: '1px solid #e5e5e5',
|
||||
boxShadow: 'none',
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { Sidebar } from "../_components/sidebar";
|
||||
import { Sidebar } from '../_components/sidebar';
|
||||
|
||||
const OrganizationLayout = ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<main className="pt-20 md:pt-24 px-4 max-w-6xl 2xl:max-w-screen-xl mx-auto">
|
||||
<div className="flex gap-x-7">
|
||||
<div className="w-64 shrink-0 hidden md:block">
|
||||
<main className='mx-auto max-w-6xl px-4 pt-20 md:pt-24 2xl:max-w-screen-xl'>
|
||||
<div className='flex gap-x-7'>
|
||||
<div className='hidden w-64 shrink-0 md:block'>
|
||||
<Sidebar />
|
||||
</div>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { Toaster } from "sonner";
|
||||
import { ClerkProvider } from "@clerk/nextjs";
|
||||
import { Toaster } from 'sonner';
|
||||
import { ClerkProvider } from '@clerk/nextjs';
|
||||
|
||||
import { ModalProvider } from "@/components/providers/modal-provider";
|
||||
import { QueryProvider } from "@/components/providers/query-provider";
|
||||
import { ModalProvider } from '@/components/providers/modal-provider';
|
||||
import { QueryProvider } from '@/components/providers/query-provider';
|
||||
|
||||
const PlatformLayout = ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue