86f0ffc7d1
* Chore disable git submodule for web-client and app-backend * Chore add newest source code of app-backend and web-client --------- Co-authored-by: Hien To <tominhhien97@gmail.com>
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import Image from "next/image";
|
|
import React from "react";
|
|
import ShortcutItem from "../ShortcutItem";
|
|
import { observer } from "mobx-react-lite";
|
|
import { ProductDetailFragment } from "@/graphql";
|
|
|
|
type Props = {
|
|
products: ProductDetailFragment[];
|
|
};
|
|
|
|
const ShortcutList: React.FC<Props> = observer(({ products }) => {
|
|
const [expand, setExpand] = React.useState<boolean>(true);
|
|
|
|
return (
|
|
<div className="flex flex-col w-full px-3 pt-3">
|
|
<button
|
|
onClick={() => setExpand(!expand)}
|
|
className="flex justify-between items-center"
|
|
>
|
|
<h2 className="text-[#9CA3AF] font-bold text-xs leading-[12px]">
|
|
SHORTCUTS
|
|
</h2>
|
|
<Image
|
|
className={`${expand ? "" : "rotate-180"}`}
|
|
src={"/icons/unicorn_angle-up.svg"}
|
|
width={24}
|
|
height={24}
|
|
alt=""
|
|
/>
|
|
</button>
|
|
<div
|
|
className={`flex flex-col gap-3 py-2 ${!expand ? "hidden " : "block"}`}
|
|
>
|
|
{products.map((product) => (
|
|
<ShortcutItem key={product.slug} product={product} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default ShortcutList;
|