Publish shot modal UI

components/Home/ShotCard.tsx

@@ -1,5 +1,5 @@
-import Image from "next/image";
 import React from "react";
+import Image from "next/image";
 
 export default function ShotCard() {
   return (

components/Profile/PublishShotModal.tsx

@@ -1,10 +1,38 @@
 import React from "react";
 import Modal from "../Reusable/Modal";
 import { useModal } from "@/hooks/modal";
+import InputField from "../Reusable/InputField";
+import { Button } from "../Reusable/Button";
+import ShotCard from "../Home/ShotCard";
 
 export function PublishShotModal() {
   const { isOpen, type } = useModal();
   const isPublishShotModal = isOpen && type === "publishShotModal";
 
-  return <Modal isOpen={isPublishShotModal}>PublishShotModal</Modal>;
+  return (
+    <Modal isOpen={isPublishShotModal} title="Final touches">
+      <div className="flex items-center pb-10 w-full h-full">
+        <div className="">
+          <ShotCard />
+        </div>
+        <div className="flex flex-col space-y-5 w-3/5 mx-auto justify-center">
+          <InputField label="Tags(Maximimum 20)" placeholder="Add Tags" />
+
+          <div className="flex justify-between items-center">
+            <Button className="py-2 px-5 text-sm font-medium border border-zinc-100">
+              Close
+            </Button>
+            <div className="inline-flex">
+              <Button className="py-2 px-5 text-sm font-medium mx-4 bg-zinc-100">
+                Save as draft
+              </Button>
+              <Button className="px-3 py-1 md:py-3 md:px-6 text-white text-sm font-medium bg-primary">
+                Publish now
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
 }

components/Reusable/InputField.tsx

@@ -1,5 +1,22 @@
 import React from "react";
 
-export default function InputField() {
-  return <div>InputField</div>;
+interface InputFieldProps {
+  label?: string;
+  placeholder: string;
+  onClick?: (event: MouseEvent) => void;
+}
+export default function InputField({ label, placeholder }: InputFieldProps) {
+  return (
+    <div className="group w-full">
+      <label htmlFor="file" className="block font-normal py-1.5 ">
+        {label}
+      </label>
+
+      <input
+        type="text"
+        placeholder={`${placeholder}`}
+        className="block w-full placeholder-gray-400/70 rounded-xl border border-gray-200 bg-white px-5 py-3 text-gray-700 focus:border-pink-300 focus:outline-none focus:ring-2 focus:ring-pink-200 group-hover:ring-pink-200  focus:ring-opacity-40 "
+      />
+    </div>
+  );
 }

components/Reusable/Modal.tsx

@@ -7,8 +7,9 @@ import { useModal } from "@/hooks/modal";
 interface ModalProps {
   children: React.ReactNode;
   isOpen: boolean;
+  title: string;
 }
-export default function Modal({ children, isOpen }: ModalProps) {
+export default function Modal({ children, isOpen, title }: ModalProps) {
   const { onClose } = useModal();
   const ref = React.useRef(null);
   const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -28,8 +29,8 @@ export default function Modal({ children, isOpen }: ModalProps) {
       onClick={handleBackdropClick}
       className="bg-black/70 overflow-y-auto overflow-hidden fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full md:inset-0 h-full max-h-full"
     >
-      <div className=" relative p-4 w-full max-w-md max-h-full">
-        <div className="relative bg-white rounded-2xl shadow-2xl">
+      <div className=" relative p-4 w-full xl:max-w-4xl">
+        <div className="relative w-full bg-white rounded-xl shadow-2xl">
           <motion.div
             animate={isOpen ? "open" : "closed"}
             variants={variants}
@@ -38,8 +39,11 @@ export default function Modal({ children, isOpen }: ModalProps) {
               delay: 0.3,
               ease: [0.5, 0.71, 1, 1.5],
             }}
-            className="p-4 h-96 w-64"
+            className="relative w-full h-full xl:px-14"
           >
+            <h3 className=" xl:py-8 xl:text-2xl xl:font-bold capitalize">
+              {title}
+            </h3>
             {children}
           </motion.div>
         </div>

tailwind.config.ts

@@ -24,7 +24,9 @@ const config: Config = {
       },
       backgroundColor: {
         primary: "#0d0c22",
+        primaryBtn: "#1a1a2e",
       },
+
       animation: {
         "infinite-scroll": "infinite-scroll 25s linear infinite",
       },