42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { memo } from 'react';
|
|
|
|
export interface DisplayOptionsPanelProps {
|
|
groupByFolder: boolean;
|
|
groupByFolderChanged: (checked: boolean) => void;
|
|
}
|
|
|
|
export const GroupByFolderPanel = memo(
|
|
({ groupByFolder, groupByFolderChanged }: DisplayOptionsPanelProps) => {
|
|
return (
|
|
<div className="mt-8 px-4">
|
|
<div className="flex items-start">
|
|
<div className="flex h-5 items-center">
|
|
<input
|
|
id="displayOptions"
|
|
name="displayOptions"
|
|
value="groupByFolder"
|
|
type="checkbox"
|
|
className="h-4 w-4 rounded border-gray-300"
|
|
onChange={(event) => groupByFolderChanged(event.target.checked)}
|
|
checked={groupByFolder}
|
|
></input>
|
|
</div>
|
|
<div className="ml-3 text-sm">
|
|
<label
|
|
htmlFor="displayOptions"
|
|
className="cursor-pointer font-medium text-gray-700"
|
|
>
|
|
Group by folder
|
|
</label>
|
|
<p className="text-gray-500">
|
|
Visually arrange libraries by folders with different colors.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
export default GroupByFolderPanel;
|