Add license drop down selector

Thenlie · Feb 25, 2023 · 6e4b013 · 6e4b013
1 parent 9f179d9
commit 6e4b013
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 6 deletions.
diff --git a/pages/src/components/DropDown/DropDown.tsx b/pages/src/components/DropDown/DropDown.tsx
@@ -3,16 +3,20 @@ import './style.css';
 
 interface DropDownProps {
     name: string;
+    label: string;
     options: string[];
 }
 
 const DropDown = (props: DropDownProps) => {
     return (
-        <select name='license-select'>
-            {props.options.map((opt) => (
-                <option>{opt}</option>
-            ))}
-        </select>
+        <div className='drop-down-container'>
+            <label htmlFor={props.name}>{props.label}</label>
+            <select name={props.name} id={props.name}>
+                {props.options.map((opt) => (
+                    <option key={opt}>{opt}</option>
+                ))}
+            </select>
+        </div>
     );
 };
 

diff --git a/pages/src/components/DropDown/style.css b/pages/src/components/DropDown/style.css
@@ -0,0 +1,31 @@
+.drop-down-container {
+    align-self: flex-start;
+    display: flex;
+    flex-direction: column;
+}
+
+.drop-down-container label {
+    padding-left: .5em;
+}
+
+select {
+    background-color: var(--primary);
+    color: var(--primary-text);
+    padding: 1em;
+    margin: .5em;
+    border-radius: .5em;
+}
+
+select:focus-visible {
+    outline: 1px auto var(--secondary-text);
+    background-color: var(--secondary);
+}
+
+option {
+    appearance: none;
+}
+
+option:focus-visible {
+    outline: none;
+    border: none;
+}
diff --git a/pages/src/screens/InputScreen.tsx b/pages/src/screens/InputScreen.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { TextArea, TextInput, Button } from '../components';
 import { generateMarkdown } from '../../../src/utils/generateMarkdown';
 import { InputData } from '../../../src/types';
+import { DropDown } from '../components/DropDown';
 
 interface InputScreenProps {
     setPage: React.Dispatch<React.SetStateAction<string>>;
@@ -20,6 +21,20 @@ const InputScreen = (props: InputScreenProps) => {
     const [testing, setTesting] = useState<string>('');
     const [contribution, setContribution] = useState<string>('');
 
+    const licenseOptions = [
+        'MIT',
+        'BSD 2-Clause',
+        'BSD 3-Clause',
+        'Boost',
+        'GNU LGPL',
+        'GNU AGPL',
+        'GNU GPL v2',
+        'GNU GPL v3',
+        'Mozilla',
+        'Unlicense',
+        'none',
+    ];
+
     const handleSubmit = () => {
         const data: InputData = {
             title: title,
@@ -54,6 +69,7 @@ const InputScreen = (props: InputScreenProps) => {
                     onChange={setUsername}
                 />
                 <TextInput placeholder='Email' name='email' value={email} onChange={setEmail} />
+                <DropDown name='license' label='Project License' options={licenseOptions} />
                 <TextArea
                     placeholder='Project Description'
                     name='description'

diff --git a/pages/src/screens/OutputScreen.tsx b/pages/src/screens/OutputScreen.tsx
@@ -12,7 +12,7 @@ const OutputScreen = (props: OutputScreenProps) => {
     return (
         <main>
             <p>Output Screen</p>
-            <MDEditor value={markdown} onChange={setMarkdown} height='100%' />
+            <MDEditor value={markdown} onChange={setMarkdown} />
         </main>
     );
 };

diff --git a/pages/src/styles.css b/pages/src/styles.css
@@ -90,5 +90,8 @@ footer a:focus-visible {
 
 .w-md-editor-text-input {
     -webkit-text-fill-color: var(--primary-text);
+}
+
+.w-md-editor-text-input:focus {
     font-weight: 500;
 }