add: orders page

src/components/icons/CalendarIcon.tsx

@@ -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

@@ -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

@@ -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

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