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,4 +1,4 @@
|
|||
import { XCircle } from "lucide-react";
|
||||
import { XCircle } from 'lucide-react';
|
||||
|
||||
interface FormErrorsProps {
|
||||
id: string;
|
||||
|
|
@ -11,15 +11,15 @@ export const FormErrors = ({ id, errors }: FormErrorsProps) => {
|
|||
return (
|
||||
<div
|
||||
id={`${id}-error`}
|
||||
aria-live="polite"
|
||||
className="mt-2 text-xs text-rose-500"
|
||||
aria-live='polite'
|
||||
className='mt-2 text-xs text-rose-500'
|
||||
>
|
||||
{errors?.[id]?.map((error: string) => (
|
||||
<div
|
||||
key={error}
|
||||
className="flex items-center font-medium p-2 border border-rose-500 bg-rose-500/10 rounded-sm"
|
||||
className='flex items-center rounded-sm border border-rose-500 bg-rose-500/10 p-2 font-medium'
|
||||
>
|
||||
<XCircle className="h-4 w-4 mr-2" />
|
||||
<XCircle className='mr-2 h-4 w-4' />
|
||||
{error}
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { forwardRef } from "react";
|
||||
import { useFormStatus } from "react-dom";
|
||||
import { forwardRef } from 'react';
|
||||
import { useFormStatus } from 'react-dom';
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { FormErrors } from "./form-errors";
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { FormErrors } from './form-errors';
|
||||
|
||||
interface FormInputProps {
|
||||
id: string;
|
||||
|
|
@ -32,7 +32,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|||
disabled,
|
||||
errors,
|
||||
className,
|
||||
defaultValue = "",
|
||||
defaultValue = '',
|
||||
onBlur,
|
||||
},
|
||||
ref
|
||||
|
|
@ -40,12 +40,12 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|||
const { pending } = useFormStatus();
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-1">
|
||||
<div className='space-y-2'>
|
||||
<div className='space-y-1'>
|
||||
{label ? (
|
||||
<Label
|
||||
htmlFor={id}
|
||||
className="text-xs font-semibold text-neutral-700"
|
||||
className='text-xs font-semibold text-neutral-700'
|
||||
>
|
||||
{label}
|
||||
</Label>
|
||||
|
|
@ -60,7 +60,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|||
placeholder={placeholder}
|
||||
type={type}
|
||||
disabled={pending ?? disabled}
|
||||
className={cn("text-sm px-2 py-1 h-7", className)}
|
||||
className={cn('h-7 px-2 py-1 text-sm', className)}
|
||||
aria-describedby={`${id}-error`}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -70,4 +70,4 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|||
}
|
||||
);
|
||||
|
||||
FormInput.displayName = "FormInput";
|
||||
FormInput.displayName = 'FormInput';
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useFormStatus } from "react-dom";
|
||||
import { Check, Loader2 } from "lucide-react";
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useFormStatus } from 'react-dom';
|
||||
import { Check, Loader2 } from 'lucide-react';
|
||||
|
||||
import { unsplash } from "@/lib/unsplash";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { defaultImages } from "@/constants/images";
|
||||
import { FormErrors } from "./form-errors";
|
||||
import { unsplash } from '@/lib/unsplash';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { defaultImages } from '@/constants/images';
|
||||
import { FormErrors } from './form-errors';
|
||||
|
||||
interface FormPickerProps {
|
||||
id: string;
|
||||
|
|
@ -29,7 +29,7 @@ export const FormPicker = ({ id, errors }: FormPickerProps) => {
|
|||
const fetchImages = async () => {
|
||||
try {
|
||||
const result = await unsplash.photos.getRandom({
|
||||
collectionIds: ["317099"],
|
||||
collectionIds: ['317099'],
|
||||
count: 9,
|
||||
});
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ export const FormPicker = ({ id, errors }: FormPickerProps) => {
|
|||
const newImages = result.response as Array<Record<string, any>>;
|
||||
setImages(newImages);
|
||||
} else {
|
||||
console.error("Failed to get images.");
|
||||
console.error('Failed to get images.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
|
@ -52,21 +52,21 @@ export const FormPicker = ({ id, errors }: FormPickerProps) => {
|
|||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="p-6 flex items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 text-sky-700 animate-spin" />
|
||||
<div className='flex items-center justify-center p-6'>
|
||||
<Loader2 className='h-6 w-6 animate-spin text-sky-700' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="grid grid-cols-3 gap-2 mb-2">
|
||||
<div className='relative'>
|
||||
<div className='mb-2 grid grid-cols-3 gap-2'>
|
||||
{images.map((image) => (
|
||||
<div
|
||||
key={image.id}
|
||||
className={cn(
|
||||
"cursor-pointer relative aspect-video group hover:opacity-75 transition bg-muted",
|
||||
pending && "opacity-50 hover:opacity-50 cursor-auto"
|
||||
'group relative aspect-video cursor-pointer bg-muted transition hover:opacity-75',
|
||||
pending && 'cursor-auto opacity-50 hover:opacity-50'
|
||||
)}
|
||||
onClick={() => {
|
||||
if (pending) return;
|
||||
|
|
@ -74,36 +74,36 @@ export const FormPicker = ({ id, errors }: FormPickerProps) => {
|
|||
}}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
type='radio'
|
||||
id={id}
|
||||
name={id}
|
||||
className="hidden"
|
||||
className='hidden'
|
||||
checked={selectedImageId === image.id}
|
||||
disabled={pending}
|
||||
value={`${image.id}|${image.urls.thumb}|${image.urls.full}|${image.links.html}|${image.user.name}`}
|
||||
/>
|
||||
<Image
|
||||
src={image.urls.thumb}
|
||||
alt="Unsplash image"
|
||||
className="object-cover rounded-sm"
|
||||
alt='Unsplash image'
|
||||
className='rounded-sm object-cover'
|
||||
fill
|
||||
/>
|
||||
{selectedImageId === image.id && (
|
||||
<div className="absolute inset-y-0 h-full w-full bg-black/30 flex items-center justify-center">
|
||||
<Check className="h-4 w-4 text-white" />
|
||||
<div className='absolute inset-y-0 flex h-full w-full items-center justify-center bg-black/30'>
|
||||
<Check className='h-4 w-4 text-white' />
|
||||
</div>
|
||||
)}
|
||||
<Link
|
||||
href={image.links.html}
|
||||
target="_blank"
|
||||
className="opacity-0 group-hover:opacity-100 absolute bottom-0 w-full text-[10px] truncate text-white hover:underline p-1 bg-black/50"
|
||||
target='_blank'
|
||||
className='absolute bottom-0 w-full truncate bg-black/50 p-1 text-[10px] text-white opacity-0 hover:underline group-hover:opacity-100'
|
||||
>
|
||||
{image.user.name}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<FormErrors id="image" errors={errors} />
|
||||
<FormErrors id='image' errors={errors} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,45 +1,45 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { X } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { ElementRef, useRef } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { X } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { ElementRef, useRef } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
import {
|
||||
Popover,
|
||||
PopoverClose,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { createBoard } from "@/actions/create-board";
|
||||
import { Button } from "@/components//ui/button";
|
||||
import { useProModal } from "@/hooks/use-pro-modal";
|
||||
} from '@/components/ui/popover';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { createBoard } from '@/actions/create-board';
|
||||
import { Button } from '@/components//ui/button';
|
||||
import { useProModal } from '@/hooks/use-pro-modal';
|
||||
|
||||
import { FormInput } from "./form-input";
|
||||
import { FormSubmit } from "./form-submit";
|
||||
import { FormPicker } from "./form-picker";
|
||||
import { FormInput } from './form-input';
|
||||
import { FormSubmit } from './form-submit';
|
||||
import { FormPicker } from './form-picker';
|
||||
|
||||
interface FormPopoverProps {
|
||||
children: React.ReactNode;
|
||||
side?: "left" | "right" | "top" | "bottom";
|
||||
align?: "center" | "start" | "end";
|
||||
side?: 'left' | 'right' | 'top' | 'bottom';
|
||||
align?: 'center' | 'start' | 'end';
|
||||
sideOffset?: number;
|
||||
}
|
||||
|
||||
export const FormPopover = ({
|
||||
children,
|
||||
side = "bottom",
|
||||
side = 'bottom',
|
||||
align,
|
||||
sideOffset = 0,
|
||||
}: FormPopoverProps) => {
|
||||
const proModal = useProModal();
|
||||
const router = useRouter();
|
||||
const closeRef = useRef<ElementRef<"button">>(null);
|
||||
const closeRef = useRef<ElementRef<'button'>>(null);
|
||||
|
||||
const { execute, fieldErrors } = useAction(createBoard, {
|
||||
onSuccess: (data) => {
|
||||
toast.success("Board created");
|
||||
toast.success('Board created');
|
||||
closeRef.current?.click();
|
||||
router.push(`/board/${data.id}`);
|
||||
},
|
||||
|
|
@ -50,8 +50,8 @@ export const FormPopover = ({
|
|||
});
|
||||
|
||||
const onSubmit = (formData: FormData) => {
|
||||
const title = formData.get("title") as string;
|
||||
const image = formData.get("image") as string;
|
||||
const title = formData.get('title') as string;
|
||||
const image = formData.get('image') as string;
|
||||
|
||||
execute({ title, image });
|
||||
};
|
||||
|
|
@ -61,32 +61,32 @@ export const FormPopover = ({
|
|||
<PopoverTrigger asChild>{children}</PopoverTrigger>
|
||||
<PopoverContent
|
||||
align={align}
|
||||
className="w-80 pt-3"
|
||||
className='w-80 pt-3'
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
>
|
||||
<div className="text-sm font-medium text-center text-neutral-600 pb-4">
|
||||
<div className='pb-4 text-center text-sm font-medium text-neutral-600'>
|
||||
Create board
|
||||
</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>
|
||||
<form action={onSubmit} className="space-y-4">
|
||||
<div className="space-y-4">
|
||||
<FormPicker id="image" errors={fieldErrors} />
|
||||
<form action={onSubmit} className='space-y-4'>
|
||||
<div className='space-y-4'>
|
||||
<FormPicker id='image' errors={fieldErrors} />
|
||||
<FormInput
|
||||
id="title"
|
||||
label="Board Title"
|
||||
type="text"
|
||||
id='title'
|
||||
label='Board Title'
|
||||
type='text'
|
||||
errors={fieldErrors}
|
||||
/>
|
||||
</div>
|
||||
<FormSubmit className="w-full">Create</FormSubmit>
|
||||
<FormSubmit className='w-full'>Create</FormSubmit>
|
||||
</form>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,38 @@
|
|||
"Use client";
|
||||
'Use client';
|
||||
|
||||
import { useFormStatus } from "react-dom";
|
||||
import { useFormStatus } from 'react-dom';
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface FormSubmitProps {
|
||||
children: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
variant?:
|
||||
| "default"
|
||||
| "destructive"
|
||||
| "outline"
|
||||
| "secondary"
|
||||
| "ghost"
|
||||
| "link"
|
||||
| "primary";
|
||||
| 'default'
|
||||
| 'destructive'
|
||||
| 'outline'
|
||||
| 'secondary'
|
||||
| 'ghost'
|
||||
| 'link'
|
||||
| 'primary';
|
||||
}
|
||||
|
||||
export const FormSubmit = ({
|
||||
children,
|
||||
disabled,
|
||||
className,
|
||||
variant = "primary",
|
||||
variant = 'primary',
|
||||
}: FormSubmitProps) => {
|
||||
const { pending } = useFormStatus();
|
||||
|
||||
return (
|
||||
<Button
|
||||
disabled={pending || disabled}
|
||||
type="submit"
|
||||
type='submit'
|
||||
variant={variant}
|
||||
size="sm"
|
||||
size='sm'
|
||||
className={cn(className)}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useFormStatus } from "react-dom";
|
||||
import { KeyboardEventHandler, forwardRef } from "react";
|
||||
import { useFormStatus } from 'react-dom';
|
||||
import { KeyboardEventHandler, forwardRef } from 'react';
|
||||
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
import { FormErrors } from "./form-errors";
|
||||
import { FormErrors } from './form-errors';
|
||||
|
||||
interface FormTextareaProps {
|
||||
id: string;
|
||||
|
|
@ -43,12 +43,12 @@ export const FormTextarea = forwardRef<HTMLTextAreaElement, FormTextareaProps>(
|
|||
const { pending } = useFormStatus();
|
||||
|
||||
return (
|
||||
<div className="space-y-2 w-full">
|
||||
<div className="space-y-1 w-full">
|
||||
<div className='w-full space-y-2'>
|
||||
<div className='w-full space-y-1'>
|
||||
{label ? (
|
||||
<Label
|
||||
htmlFor={id}
|
||||
className="text-xs font-semibold text-neutral-700"
|
||||
className='text-xs font-semibold text-neutral-700'
|
||||
>
|
||||
{label}
|
||||
</Label>
|
||||
|
|
@ -64,7 +64,7 @@ export const FormTextarea = forwardRef<HTMLTextAreaElement, FormTextareaProps>(
|
|||
id={id}
|
||||
disabled={pending || disabled}
|
||||
className={cn(
|
||||
"resize-none focus-visible:ring-0 focus-visible:ring-offset-0 ring-0 focus:ring-0 outline-none shadow-sm",
|
||||
'resize-none shadow-sm outline-none ring-0 focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0',
|
||||
className
|
||||
)}
|
||||
aria-describedby={`${id}-error`}
|
||||
|
|
@ -77,4 +77,4 @@ export const FormTextarea = forwardRef<HTMLTextAreaElement, FormTextareaProps>(
|
|||
}
|
||||
);
|
||||
|
||||
FormTextarea.displayName = "FormTextarea";
|
||||
FormTextarea.displayName = 'FormTextarea';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue