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

add: orders page

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-07-09 00:00:36 +03:30
parent 789de27b47
commit 82cdaffe6d
9 changed files with 312 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/menu/layout.tsx → src/app/[name]/layout.tsx
View File
src/app/[name]/orders/layout.tsx
+18
View File
@@ -0,0 +1,18 @@
import ClientSideWrapper from "@/components/wrapper/ClientSideWrapper";
export const metadata = {
title: 'Orders',
}
export default function MenuLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<ClientSideWrapper>
{children}
</ClientSideWrapper>
);
}
src/app/[name]/orders/page.tsx
+123
View File
@@ -0,0 +1,123 @@
'use client';
import Button from '@/components/button/PrimaryButton';
import CalendarIcon from '@/components/icons/CalendarIcon';
import LocationPinIcon from '@/components/icons/LocationPinIcon';
import TabContainer from '@/components/tab/TabContainer'
import TabItemRenderer from '@/components/tab/TabItemRenderer'
import clsx from 'clsx';
import Image from 'next/image';
import React, { useCallback, useState } from 'react'
const currentOrders = [
{
id: 0,
address: 'خیابان دانشگاه روبروی بیمارستان خوانساری ساختمان مهر...',
date: 'دوشنبه، 28 مرداد 1403',
price: '560,000',
items: [
{ id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
{ id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
{ id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
]
},
]
function OrdersIndex() {
const [selectedTab, setSelectedTab] = useState(0);
const categories = [
{ id: 0, title: 'سفارشات فعال', image: '/assets/images/food-image.png' },
{ id: 1, title: 'سفارشات قبلی', image: '/assets/images/food-image.png' }
]
const updateTab = useCallback((index: number) => {
setSelectedTab(index);
}, []);
const firstTab = () => {
return (
<div>
{currentOrders.map((order) => {
return (
<div key={order.id} className='w-full px-[17px] mt-4 pt-8 pb-6 bg-white rounded-3xl'>
<div className="text-sm2">
<div className='flex gap-2'>
<LocationPinIcon size={16} />
<p>{order.address}</p>
</div>
<div className='mt-2 flex gap-2'>
<CalendarIcon size={16} />
<p>{order.date}</p>
</div>
</div>
<hr className='mx-4 mt-6 text-disabled3 border-2' />
<div className='flex justify-between mt-6'>
<div className='flex justify-start gap-[9px]'>
{order.items.map((item) => {
return (
<span key={item.id} className='w-8 h-8 relative'>
<Image
priority
className='rounded-lg'
src={item.image}
width={32}
height={32}
alt="order image"
/>
<span className="absolute -bottom-3.5 -right-0.5 text-xs2 bg-white border border-border rounded-full w-[18px] h-[18px] text-center leading-4.5">
{item.quantity}
</span>
</span>
)
})}
</div>
<div className='font-medium text-sm' dir='ltr'>
{order.price} T
</div>
</div>
<Button className='mt-6 font-medium!'>پیگیری سفارش</Button>
</div>
)
})}
</div>
)
}
return (
<div className='pt-8'>
<TabContainer
className='h-[72px] !pt-3 !pb-2 overflow-y-hidden'>
{categories.map((item, index) => (
<TabItemRenderer
key={index}
className={''}
onClick={() => updateTab(index)}
>
<Image
priority
src={item.image}
width={24}
height={24}
alt="category image"
/>
<span className={clsx(
'text-xs transition-all duration-150',
index === selectedTab ? 'text-black' : 'text-disabled-text'
)}>
{item.title}
</span>
</TabItemRenderer>
))}
</TabContainer>
{/* First tab */}
{selectedTab === 0 && firstTab()}
</div>
)
}
export default OrdersIndex
src/app/menu/page.tsx → src/app/[name]/page.tsx
View File
src/app/globals.css
+1
View File
@@ -13,6 +13,7 @@
--color-foreground: #333333;
--color-disabled: #E7E7E7;
--color-disabled2: #7F7F7F;
--color-disabled3: #F2F2F2;
--color-disabled-text: #8C90A3;
--color-menu-header: #C3C7DD;
--color-icon-deactive: #A8ABBF;
src/components/icons/CalendarIcon.tsx
+82
View File
@@ -0,0 +1,82 @@
import React from 'react';
interface TableIconProps {
className?: string;
stroke?: string;
strokeWidth?: number;
size?: number;
}
const CalendarIcon: React.FC<TableIconProps> = ({
className = '',
stroke = '#292D32',
strokeWidth = 1.3,
size = 16,
}) => {
return (
<svg
width={size}
height={size}
viewBox="0 0 16 16"
fill="none"
className={className}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.3335 1.33325V3.33325"
stroke={stroke}
strokeWidth={strokeWidth}
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.6665 1.33325V3.33325"
stroke={stroke}
strokeWidth={strokeWidth}
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M2.3335 6.06006H13.6668"
stroke={stroke}
strokeWidth={strokeWidth}
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14 5.66659V11.3333C14 13.3333 13 14.6666 10.6667 14.6666H5.33333C3 14.6666 2 13.3333 2 11.3333V5.66659C2 3.66659 3 2.33325 5.33333 2.33325H10.6667C13 2.33325 14 3.66659 14 5.66659Z"
stroke={stroke}
strokeWidth={strokeWidth}
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.99715 9.13338H8.00314"
stroke={stroke}
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.52938 9.13338H5.53537"
stroke={stroke}
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.52938 11.1334H5.53537"
stroke={stroke}
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default CalendarIcon;
src/components/icons/LocationPinIcon.tsx
+39
View File
@@ -0,0 +1,39 @@
import React from 'react';
interface SearchIconProps {
className?: string;
stroke?: string;
strokeWidth?: number;
size?: number;
}
const LocationPinIcon: React.FC<SearchIconProps> = ({
className = '',
stroke = '#292D32',
strokeWidth = 1.3,
size = 16,
}) => {
return (
<svg
width={size}
height={size}
viewBox="0 0 16 16"
fill="none"
className={className}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.99992 8.95321C9.14867 8.95321 10.0799 8.02197 10.0799 6.87321C10.0799 5.72446 9.14867 4.79321 7.99992 4.79321C6.85117 4.79321 5.91992 5.72446 5.91992 6.87321C5.91992 8.02197 6.85117 8.95321 7.99992 8.95321Z"
stroke={stroke}
strokeWidth={strokeWidth}
/>
<path
d="M2.4133 5.65992C3.72664 -0.113413 12.28 -0.106746 13.5866 5.66659C14.3533 9.05325 12.2466 11.9199 10.4 13.6933C9.05997 14.9866 6.93997 14.9866 5.5933 13.6933C3.7533 11.9199 1.64664 9.04659 2.4133 5.65992Z"
stroke={stroke}
strokeWidth={strokeWidth}
/>
</svg>
);
};
export default LocationPinIcon;
src/components/tab/TabContainer.tsx
+26
View File
@@ -0,0 +1,26 @@
import React, { ReactElement, ReactNode } from 'react'
import HorizontalScrollView from '../listview/HorizontalScrollView'
type Props = {
itemRenderer?: (child: ReactNode, index: number) => ReactElement;
children: ReactNode;
} & React.OlHTMLAttributes<HTMLUListElement>;
function TabContainer({ itemRenderer, children, ...restProps }: Props) {
return (
<HorizontalScrollView
style={{
backgroundColor: '#FFFFFF70',
justifyContent: 'center',
border: '2px solid white',
borderRadius: '32px',
}}
itemRenderer={itemRenderer}
{...restProps}>
{children}
</HorizontalScrollView>
)
}
export default TabContainer
src/components/tab/TabItemRenderer.tsx
+23
View File
@@ -0,0 +1,23 @@
import React from 'react';
type Props = {
children: React.ReactNode;
} & React.HTMLAttributes<HTMLDivElement>;
function TabItemRendererComponent({ children, ...rest }: Props) {
return (
<div
{...rest}
className={`${rest.className} transition-all duration-200 ease-out w-full h-full flex flex-col items-center justify-center gap-2`}
>
{children}
</div>
);
}
// Memoize with shallow comparison of props
const TabItemRenderer = React.memo(TabItemRendererComponent, (prevProps, nextProps) => {
return prevProps.className === nextProps.className && prevProps.children === nextProps.children;
});
export default TabItemRenderer;