ahmadk953/tasko
1
0
Fork 0
mirror of https://github.com/ahmadk953/tasko.git synced 2025-04-30 18:59:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Formated Files

Browse source
This commit is contained in:
Ahmad 2024-02-15 20:49:19 -05:00
parent d5631b309a
commit e768d9181f
No known key found for this signature in database
GPG key ID: 8FD8A93530D182BF
138 changed files with 1829 additions and 1851 deletions
Download patch file Download diff file Expand all files Collapse all files

54
components/form/form-picker.tsx
View file

@ -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>
);
};