danak/dmenu-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update food

Browse Source
This commit is contained in:
hamid zarghami
2025-11-15 14:45:04 +03:30
parent 0fd87e99f2
commit eaa9ef2a9a
18 changed files with 609 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DefaultTableSkeleton.tsx
+3 -4
View File
@@ -1,5 +1,4 @@
import { type FC, Fragment } from 'react'
import Td from './Td'
import Skeleton from 'react-loading-skeleton'
type Props = {
@@ -15,9 +14,9 @@ const DefaultTableSkeleton: FC<Props> = ({ tdCount, trCount = 5 }) => {
<tr className="w-full h-[64px] md:h-[74px] bg-white border-t border-[#EAEDF5]" key={rowIndex}>
{
Array.from({ length: tdCount }).map((_, colIndex) => (
<Td text={''} key={colIndex}>
<Skeleton />
</Td>
<td key={colIndex} className="px-3 md:px-6 py-3 md:py-4 whitespace-nowrap text-xs">
<Skeleton height={20} width="100%" />
</td>
))
}
</tr>
src/components/Table.tsx
+3 -44
View File
@@ -1,4 +1,4 @@
import React, { Fragment, useState, memo } from 'react';
import React, { useState, memo } from 'react';
import DefaultTableSkeleton from '../components/DefaultTableSkeleton';
import Td from '../components/Td';
import type { TableProps, RowDataType, ColumnType } from '@/components/types/TableTypes';
@@ -147,9 +147,7 @@ const Table = <T extends RowDataType>({
const renderTableBody = () => {
if (isLoading) {
return (
<Fragment>
<DefaultTableSkeleton tdCount={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)} trCount={emptyRowsCount} />
</Fragment>
<DefaultTableSkeleton tdCount={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)} trCount={emptyRowsCount} />
);
}
@@ -321,43 +319,4 @@ const Table = <T extends RowDataType>({
);
};
export default memo(Table) as <T extends RowDataType>(props: TableProps<T>) => React.ReactElement;
/*
مثال استفاده با pagination:
import Table from '@/components/Table';
import { useState } from 'react';
const MyComponent = () => {
const [currentPage, setCurrentPage] = useState(1);
const totalPages = 10;
const columns = [
{ title: 'نام', key: 'name' },
{ title: 'ایمیل', key: 'email' },
];
const data = [
{ id: 1, name: 'علی', email: 'ali@example.com' },
{ id: 2, name: 'فاطمه', email: 'fateme@example.com' },
];
const handlePageChange = (page: number) => {
setCurrentPage(page);
// اینجا می‌توانید API call جدید برای دریافت داده‌های صفحه جدید بزنید
};
return (
<Table
columns={columns}
data={data}
pagination={{
currentPage,
totalPages,
onPageChange: handlePageChange
}}
/>
);
};
*/
export default memo(Table) as <T extends RowDataType>(props: TableProps<T>) => React.ReactElement;
src/components/UploadBoxDraggble.tsx
+24 -8
View File
@@ -12,7 +12,8 @@ type Props = {
preview?: string[],
onChangePreview?: (preview: string[]) => void,
getCover?: (url: string) => void,
coverUrl?: string
coverUrl?: string,
imageSize?: 'small' | 'medium' | 'large'
}
const UploadBoxDraggble: FC<Props> = (props: Props) => {
@@ -92,9 +93,17 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
{
files.length > 0 || perviews ? (
<div className='mt-4 flex gap-4 items-center'>
<div className={clx(
'mt-4',
props.imageSize === 'large' ? 'grid grid-cols-2 gap-4' : 'flex gap-4 items-center flex-wrap'
)}>
{
perviews && perviews.map((item, index) => {
const imageSizeClass = props.imageSize === 'large'
? 'w-full h-32 rounded-lg'
: props.imageSize === 'medium'
? 'size-20 rounded-lg'
: 'size-10 rounded-full'
return (
<div key={index} className='flex items-center gap-2'>
<div key={index} className='flex relative items-center gap-2'>
@@ -105,10 +114,11 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
}
}} src={item}
className={clx(
'size-10 rounded-full object-cover',
imageSizeClass,
'object-cover cursor-pointer',
cover === item ? 'border-2 border-red-400' : ''
)} />
<div onClick={() => handleDeletePreview(index)} className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
<div onClick={() => handleDeletePreview(index)} className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center cursor-pointer z-10'>
<CloseCircle className='size-4 ' color='red' />
</div>
</div>
@@ -123,24 +133,30 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
<div key={index} className='flex border p-2 rounded-lg items-center gap-2'>
<div className='flex relative items-center gap-2'>
<div className='text-xs'>{file.name}</div>
<div className='absolute -left-4 -top-4 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
<div className='absolute -left-4 -top-4 shadow-md bg-white size-5 rounded-full flex justify-center items-center cursor-pointer'>
<CloseCircle onClick={() => handleDelete(index)} className='size-4 ' color='red' />
</div>
</div>
</div>
)
}
else
else {
const imageSizeClass = props.imageSize === 'large'
? 'w-full h-32 rounded-lg'
: props.imageSize === 'medium'
? 'size-20 rounded-lg'
: 'size-10 rounded-full'
return (
<div key={index} className='flex items-center gap-2'>
<div key={index} className='flex relative items-center gap-2'>
<img src={URL.createObjectURL(file)} alt={file.name} className='size-10 rounded-full object-cover' />
<div className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
<img src={URL.createObjectURL(file)} alt={file.name} className={clx(imageSizeClass, 'object-cover')} />
<div className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center cursor-pointer z-10'>
<CloseCircle onClick={() => handleDelete(index)} className='size-4 ' color='red' />
</div>
</div>
</div>
)
}
})
}
</div>