subnub
59 lines
1.9 KiB
React
59 lines
1.9 KiB
React
import { useSelector } from "react-redux";
|
|
import QuickAccessItem from "../QuickAccessItem";
|
|
import React, { useState } from "react";
|
|
import { useQuickFiles } from "../../hooks/files";
|
|
import classNames from "classnames";
|
|
|
|
const QuickAccess = (props) => {
|
|
const { data: quickfilesList } = useQuickFiles();
|
|
const currentRouteType = useSelector((state) => state.main.currentRouteType);
|
|
const [quickAccessExpanded, setQuickAccessExpanded] = useState(false);
|
|
|
|
return (
|
|
<div
|
|
className="overflow-hidden"
|
|
style={
|
|
currentRouteType === "home" ? { display: "block" } : { display: "none" }
|
|
}
|
|
>
|
|
<div className="flex flex-row items-center justify-between mb-4">
|
|
<h2 className=" text-[#212b36] text-[22px] font-medium">
|
|
Quick Access
|
|
</h2>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
width="35"
|
|
height="35"
|
|
onClick={() => setQuickAccessExpanded(!quickAccessExpanded)}
|
|
className={classNames("cursor-pointer animate-movement", {
|
|
"rotate-180": quickAccessExpanded,
|
|
})}
|
|
>
|
|
<path
|
|
d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
|
|
fill="#3c85ee"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div
|
|
className={classNames(
|
|
"grid animate-movement grid-cols-[repeat(auto-fit,minmax(40%,45%))] xs:grid-cols-[repeat(auto-fit,minmax(185px,185px))] gap-[20px] justify-center xs:justify-normal",
|
|
{
|
|
"max-h-36 sm:max-h-40": !quickAccessExpanded,
|
|
"max-h-[720px] sm:max-h-[665px] quickAccessOne:max-h-[1000px] quickAccessTwo:max-h-[660px] quickAccessThree:max-h-[490px]":
|
|
quickAccessExpanded,
|
|
}
|
|
)}
|
|
>
|
|
{quickfilesList?.map((file) => (
|
|
<QuickAccessItem key={file._id} file={file} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default QuickAccess;
|