fix(ux): disable button for already added fonts (codesandbox#3005)

Author: jyash97

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/index.js

@@ -3,7 +3,7 @@ import { Button } from '@codesandbox/common/lib/components/Button';
 import { FontPicker } from './FontPicker/index';
 import { Container } from './elements';
 
-export const AddFont = ({ addResource }) => {
+export const AddFont = ({ addResource, addedResource }) => {
   const [activeFontFamily, setActiveFontFamily] = useState('Roboto');
 
   const addFont = async () => {
@@ -14,6 +14,10 @@ export const AddFont = ({ addResource }) => {
     }
   };
 
+  const fontAlreadyExists = addedResource.filter(font =>
+    font.includes(activeFontFamily)
+  );
+
   return (
     <>
       <Container>
@@ -24,8 +28,15 @@ export const AddFont = ({ addResource }) => {
         />
       </Container>
       <Container>
-        <Button disabled={!activeFontFamily} block small onClick={addFont}>
-          Add Typeface
+        <Button
+          disabled={!activeFontFamily || fontAlreadyExists.length}
+          block
+          small
+          onClick={addFont}
+        >
+          {fontAlreadyExists.length > 0
+            ? 'Typeface already added'
+            : 'Add Typeface'}
         </Button>
       </Container>
     </>

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.tsx

@@ -115,6 +115,7 @@ export const Dependencies: FunctionComponent = () => {
                 resource,
               })
             }
+            addedResource={fonts}
           />
           {fonts.map(resource => (
             <ExternalFonts