Revert "feat: remove card options (#562)"

This reverts commit 7edab1a.
2anki · Jul 11, 2024 · 4b5d7f4 · 4b5d7f4
1 parent 5201bcb
commit 4b5d7f4
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 0 deletions.
diff --git a/src/components/icons/SettingsIcon.tsx b/src/components/icons/SettingsIcon.tsx
@@ -0,0 +1,26 @@
+function SettingsIcon() {
+  return (
+    <svg
+      className="icon"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+      />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+      />
+    </svg>
+  );
+}
+
+export default SettingsIcon;
diff --git a/src/pages/UploadPage/UploadPage.tsx b/src/pages/UploadPage/UploadPage.tsx
@@ -1,13 +1,16 @@
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 
 import useQuery from '../../lib/hooks/useQuery';
 import WarningMessage from '../../components/WarningMessage';
 import UploadForm from './components/UploadForm/UploadForm';
+import SettingsIcon from '../../components/icons/SettingsIcon';
 import SettingsModal from '../../components/modals/SettingsModal/SettingsModal';
 import {
   FlexColumn,
   ImportTitle,
   InfoMessage,
+  CardOptionsLink,
   UploadContainer
 } from './styled';
 import { Main, PageContainer } from '../../components/styled';
@@ -34,6 +37,12 @@ export function UploadPage({ setErrorMessage }: Props) {
           {isDevelopment ? <WarningMessage /> : null}
           <FlexColumn>
             <ImportTitle>{getVisibleText('upload.page.title')}</ImportTitle>
+            <CardOptionsLink onClick={() => setShowCardOptionsModal(true)}>
+              <Link className="link" to="?view=template">
+                <SettingsIcon />
+                {getVisibleText('card.options')}
+              </Link>
+            </CardOptionsLink>
           </FlexColumn>
           <div className="container">
             <UploadForm setErrorMessage={setErrorMessage} />

diff --git a/src/pages/UploadPage/styled.tsx b/src/pages/UploadPage/styled.tsx
@@ -20,6 +20,17 @@ export const ImportTitle = styled.h2`
     font-weight: bold;
 `;
 
+export const CardOptionsLink = styled.div`
+    display: flex;
+    align-items: center;
+    justify-items: center;
+
+    .link {
+        display: flex;
+        color: grey;
+    }
+`;
+
 export const UploadContainer = styled(Container)`
     display: flex;
     flex-direction: column;