Repository: usememos/memos
File: web/src/components/MemoResourceListView.tsx (TypeScript)

Code before:
    if (resources.length === 0) return <></>;

    if (resources.length === 1) {
      return (
        <div className="mt-2 max-w-full max-h-72 flex justify-center items-center border dark:border-zinc-800 rounded overflow-hidden hide-scrollbar hover:shadow-md">
          <MediaCard resource={mediaResources[0]} />
        </div>
      );
    }

    const Cards = resources.map((resource) => (
      <SquareDiv
        key={resource.id}
        className="flex justify-center items-center border dark:border-zinc-900 rounded overflow-hidden hide-scrollbar hover:shadow-md"
      >
        <MediaCard resource={resource} thumbnail />
      </SquareDiv>
    ));

    if (resources.length === 2) {
      return <div className="w-full mt-2 grid gap-2 grid-cols-2">{Cards}</div>;
    }

    if (resources.length === 4) {
      return <div className="w-full mt-2 grid gap-2 grid-cols-2">{Cards}</div>;
    }

    return <div className="w-full mt-2 grid gap-2 grid-cols-2 sm:grid-cols-3">{Cards}</div>;
  };

  const OtherList = ({ resources = [] }: { resources: Resource[] }) => {
    if (resources.length === 0) return <></>;

    return (
      <div className="w-full flex flex-row justify-start flex-wrap mt-2">
        {otherResources.map((resource) => (
          <MemoResource key={resource.id} className="my-1 mr-2" resource={resource} />
        ))}
      </div>
    );
  };

  return (
    <>
      <MediaList resources={mediaResources} />
      <OtherList resources={otherResources} />
    </>
  );
};

export default memo(MemoResourceListView);

Review comment (suggestion):
```suggestion
    if (resources.length === 2 || resources.length === 4) {
      return <div className="w-full mt-2 grid gap-2 grid-cols-2">{Cards}</div>;
    }
```

Code after:
    if (resources.length === 0) return <></>;

    if (resources.length === 1) {
      return (
        <div className="mt-2 max-w-full max-h-72 flex justify-center items-center border dark:border-zinc-800 rounded overflow-hidden hide-scrollbar hover:shadow-md">
          <MediaCard resource={mediaResources[0]} />
        </div>
      );
    }

    const cards = resources.map((resource) => (
      <SquareDiv
        key={resource.id}
        className="flex justify-center items-center border dark:border-zinc-900 rounded overflow-hidden hide-scrollbar hover:shadow-md"
      >
        <MediaCard resource={resource} thumbnail />
      </SquareDiv>
    ));

    if (resources.length === 2 || resources.length === 4) {
      return <div className="w-full mt-2 grid gap-2 grid-cols-2">{cards}</div>;
    }

    return <div className="w-full mt-2 grid gap-2 grid-cols-2 sm:grid-cols-3">{cards}</div>;
  };

  const OtherList = ({ resources = [] }: { resources: Resource[] }) => {
    if (resources.length === 0) return <></>;

    return (
      <div className="w-full flex flex-row justify-start flex-wrap mt-2">
        {otherResources.map((resource) => (
          <MemoResource key={resource.id} className="my-1 mr-2" resource={resource} />
        ))}
      </div>
    );
  };

  return (
    <>
      <MediaList resources={mediaResources} />
      <OtherList resources={otherResources} />
    </>
  );
};

export default memo(MemoResourceListView);