#495 add caret down icon

src/common/components/icons/caret-down-icon.component.tsx

@@ -0,0 +1,15 @@
+export const CaretDown = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="m213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 48 88h160a8 8 0 0 1 5.66 13.66"
+      />
+    </svg>
+  );
+};

src/common/components/icons/index.ts

@@ -10,3 +10,4 @@ export * from './copy-icon.component';
 export * from './paste-icon.component';
 export * from './delete-icon.component';
 export * from './pencil-icon.component';
+export * from './caret-down-icon.component';

src/pods/thumb-pages/components/thumb-page.tsx

@@ -7,6 +7,7 @@ import { createRef, useRef } from 'react';
 import { Layer, Stage } from 'react-konva';
 import { ThumbPageContextMenu } from './context-menu';
 import { useContextMenu } from '../use-context-menu-thumb.hook';
+import { CaretDown } from '@/common/components/icons';
 import classes from './thumb-page.module.css';
 
 interface Props {
@@ -61,6 +62,7 @@ export const ThumbPage: React.FunctionComponent<Props> = props => {
             })}
           </Layer>
         </Stage>
+        <CaretDown />
         {showContextMenu && (
           <ThumbPageContextMenu
             contextMenuRef={contextMenuRef}