about

src/store/AppProvider.tsx

@@ -34,11 +34,11 @@ const AppReducer = (state:typeof data,action:Actions)=>{
     }
     return {...state}
 }
-
+export const resizeOb = fromEvent(window,'resize')
 export const AppProvider = (props: any)=>{
     const [state,dispatch] = useReducer(AppReducer,data)
     const location = useLocation()
-    const ob = fromEvent(window,'resize')
+
     useEffect(()=>{
         dispatch({type:'routerOnChange',payload:{currentPage:location.pathname}})
         dispatch({type:'slideOnChange',payload:{pageIndex:0}})

src/views/About/Memorabilia/EventItem.tsx

@@ -7,6 +7,7 @@ import {
   useInteractions,
   useHover,
 } from "@floating-ui/react-dom-interactions";
+import {resizeOb} from "@/store/AppProvider";
 interface EventItemType extends IProps {
   itmeIndex: number;
   data: any;
@@ -86,7 +87,7 @@ export const EventItem = (props: EventItemType) => {
 export const EventCols = (props: EventColsType) => {
   const { data } = props;
   return (
-    <div className="grid grid-cols-4 pb-[3rem]">
+    <div className="grid grid-cols-4 labtop:grid-cols-5 pb-[3rem]">
       {data &&
         data.length > 0 &&
         data.map((i: any, index: number) => (
@@ -96,14 +97,27 @@ export const EventCols = (props: EventColsType) => {
   );
 
 };
-
+const checkWidth=(width:number)=>{
+  return width>=1920
+}
 export const EventsTable = (props: EventsTableType) => {
   const { tableIndex, data } = props;
   const [colData, setColData] = useState<undefined | any[]>(undefined);
-  useEffect(() => {
-    const half = 4;
+  const setData=(width:number)=>{
+    let half=4
+    if(checkWidth(width)){
+      half=5
+    }
     const c = _chunk(data, half);
     setColData(c);
+  }
+  useEffect(() => {
+    resizeOb.subscribe((event)=>{
+      //@ts-ignore
+      setData(event.currentTarget?.innerWidth)
+    })
+    setData(window.innerWidth)
+    // setData(4);
   }, [data]);
   return (
     <div>

src/views/About/Memorabilia/index.tsx

@@ -7,18 +7,36 @@ import { EventItem, EventsTable } from "./EventItem"
 import { EventsScrollView } from "@/components/EventsScrollView"
 
 import Step from "@/assets/img/step.png"
+import {resizeOb} from "@/store/AppProvider";
 
 
 interface MemorabiliaType extends IProps {
 
 }
 
-
+const checkWidth=(width:number)=>{
+  return width>=1920
+}
 export const Memorabilia = () => {
   const [data,setData] = useState<any>()
   const [currentSlide,setCurrentSlide] = useState(0)
   useEffect(()=>{
-    const fetchData = getEvents(8).subscribe(v=>{
+    let fetchNum=8,fetchData:any=null;
+    resizeOb.subscribe((event)=>{
+      //@ts-ignore
+      const _fetchNum=checkWidth(event.currentTarget.innerWidth)?10:8
+      if(_fetchNum!==fetchNum){
+        fetchNum=_fetchNum
+        setData(data.slice(0,8))
+
+        fetchData = getEvents(_fetchNum).subscribe(v=>{
+          setData(v)
+        },err=>{ throw new Error(err)})
+      }
+
+    })
+
+    fetchData = getEvents(checkWidth(window.innerWidth)?10:8).subscribe(v=>{
       setData(v)
     },err=>{ throw new Error(err)})
     return ()=> fetchData.unsubscribe()
@@ -47,7 +65,7 @@ export const Memorabilia = () => {
   return (
     <AppContianer className="flex items-center justify-start h-full w-full relative  labtop:px-[120px] ">
 
-      <div className='w-[896px]'>
+      <div className='w-[896px] labtop:w-[1120px]'>
         <div className='absolute top-12 labtop:right-[14rem] right-[7rem]'>
           <div className="hero-title">Memorabilia</div>
           <div className="subTitle-1-cn py-3 flex items-center gap-x-5">