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,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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue