add category feature

depapp · May 10, 2024 · d53e7b0 · d53e7b0
1 parent 1efca90
commit d53e7b0
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 11 deletions.
diff --git a/src/components/FormPamerin.js b/src/components/FormPamerin.js
@@ -6,7 +6,7 @@ export const Form = styled.form`
   display: flex;
   flex-direction: column;
   gap: 0;
-  
+
   @media (max-width: 768px) {
     max-width: 300px;
   }
@@ -17,6 +17,7 @@ export const Field = styled.div`
   font-size: 1rem;
   flex-direction: column;
   align-items: flex-start;
+  color: #4b587c;
 
   label {
     margin: 7px 0;
@@ -61,4 +62,4 @@ export const Error = styled.p`
   height: 1rem;
   padding: 0;
   font-size: 14px;
-`;
+`;
diff --git a/src/pages/post/create.js b/src/pages/post/create.js
@@ -13,7 +13,7 @@ const initialState = {
   image: "",
   url: "",
   description: "",
-  tags: [],
+  tags: "Aplikasi",
 };
 
 const NewPost = () => {
@@ -117,6 +117,27 @@ const NewPost = () => {
             </div>
             <Form onSubmit={handleSubmit} noValidate>
               <div>
+                <Field>
+                  <label htmlFor="tags"></label>
+                  <select
+                    className="select"
+                    id="tags"
+                    name="tags"
+                    value={tags}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                  >
+                    <option value="Aplikasi">Kategori: Aplikasi</option>
+                    <option value="Boilerplate">Kategori: Boilerplate</option>
+                    <option value="Artikel/Tulisan">
+                      Kategori: Artikel/Tulisan
+                    </option>
+                    <option value="Channel Youtube">
+                      Kategori: Channel Youtube
+                    </option>
+                  </select>
+                </Field>
+
                 <Field>
                   <label htmlFor="name"></label>
                   <input

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -92,6 +92,24 @@ a {
   padding: 1rem;
 }
 
+.select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  width: max-content;
+  color: #888888;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  padding-left: 0.8rem;
+  padding-right: 58.5%;
+  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 0.5rem center;
+  background-size: 18px;
+  box-sizing: border-box;
+}
+
 .title {
   padding: 0;
   margin: 0;
@@ -125,4 +143,7 @@ a {
   .containerHomeMessage {
     margin: 2.3rem 1.5rem 0.6rem;
   }
+  .select {
+    padding-right: 30.6%;
+  }
 }
diff --git a/src/validation/productValidation.js b/src/validation/productValidation.js
@@ -9,10 +9,6 @@ export default function productValidation(values) {
         errors.subtitle = "Judul harus di isi"
     }
 
-    // if (!values.twitter) {
-    //     errors.twitter = 'Username Twitter harus di isi'
-    // }
-
     if (!values.url) {
         errors.url = 'Link wajib di isi'
     } else if (!/^(ftp|http|https):\/\/[^ "]+$/.test(values.url)) {
@@ -23,9 +19,5 @@ export default function productValidation(values) {
         errors.description = 'Deskripsi wajib di isi'
     }
 
-    // if(!values.tags){
-    //     errors.tags = "Define at least 2 tags"
-    // }
-
     return errors
 }