🎨 ✨ Modal added and code formatted

max-programming · max-programming · commit 3773b649a361 · 2023-10-10T13:30:46.000+05:30
diff --git a/components/Card.tsx b/components/Card.tsx
@@ -1,6 +1,12 @@
 import { emojify } from '@twuni/emojify';
-import { GoStar, GoRepoForked, GoIssueOpened } from 'react-icons/go';
+import {
+  GoStar,
+  GoRepoForked,
+  GoAlertFill,
+  GoIssueOpened
+} from 'react-icons/go';
 import { RepoItem } from 'types';
+import ReportModal from './ReportModal';
 
 interface Props {
   repo: RepoItem;
@@ -11,30 +17,45 @@ function Card({ repo }: Props) {
     <section className="shadow-sm card bg-2023-void-2 ring-1 ring-2023-manga-3 transition duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-2023-bavarian-gold-2/30">
       <div className="relative card-body p-6">
         <div className="flex-1">
-          <div className="flex gap-4 items-center justify-start">
-            <a
-              className="border-2 rounded-full h-14 aspect-square p-1.5 border-neutral-100"
-              href={repo.owner.html_url}
-              title={repo.owner.login}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <img
-                src={repo.owner.avatar_url}
-                alt={repo.owner.login}
-                className="rounded-full"
-              />
-            </a>
-            <h2 className="text-3xl cursor-pointer hover:underline text-2023-bavarian-gold-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-full">
+          <div className="flex items-center justify-between">
+            <div className="flex gap-4 items-center justify-start">
               <a
-                href={repo.html_url}
-                title={repo.name}
+                className="border-2 rounded-full h-14 aspect-square p-1.5 border-neutral-100"
+                href={repo.owner.html_url}
+                title={repo.owner.login}
                 target="_blank"
                 rel="noreferrer"
               >
-                {repo.name}
+                <img
+                  src={repo.owner.avatar_url}
+                  alt={repo.owner.login}
+                  className="rounded-full"
+                />
               </a>
-            </h2>
+              <h2 className="text-3xl cursor-pointer hover:underline text-2023-bavarian-gold-2 whitespace-pre-wrap text-ellipsis overflow-hidden">
+                <a
+                  href={repo.html_url}
+                  title={repo.name}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {repo.name}
+                </a>
+              </h2>
+            </div>
+            <button
+              className="hover:bg-2023-bavarian-red-2 p-2 text-center stat-title items-center inline-flex rounded-lg transition ease-linear duration-200"
+              onClick={() => {
+                const modal = document.getElementById(
+                  'modal'
+                ) as HTMLDialogElement;
+                if (modal) {
+                  modal.showModal();
+                }
+              }}
+            >
+              <GoAlertFill className="text-2023-manga-2 outline-none border-none text-lg" />
+            </button>
           </div>
 
           <h6 className="my-5 text-2023-manga-2 text-lg">
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -7,23 +7,23 @@ import { BsPeopleFill } from 'react-icons/bs';
 
 import Search, { SearchProps } from './Search';
 
-
 const SearchBar = (props: SearchProps) => {
   const router = useRouter();
 
-  return (router.pathname === '/repos/[language]' && (
-      <Search {...props} />
-    )
-  )
-}
+  return router.pathname === '/repos/[language]' && <Search {...props} />;
+};
 
 function Header() {
   return (
     <header className="border-b-[0.5px] border-dashed border-b-2023-manga-3 mb-5">
       <div className="container mx-auto px-4 py-2">
         <div className="justify-between shadow-lg navbar">
           <Link href="/">
-            <img src="/hacktoberfest.svg" alt="Hacktoberfest" className="h-12 w-auto sm:h-auto" />
+            <img
+              src="/hacktoberfest.svg"
+              alt="Hacktoberfest"
+              className="h-12 w-auto sm:h-auto"
+            />
           </Link>
 
           <SearchBar searchBarWrapperStyles="hidden sm:inline-flex flex-1 max-w-md px-6" />
@@ -33,7 +33,7 @@ function Header() {
               href="/contributors"
               className="btn btn-square btn-ghost umami--click--contributors-button "
             >
-              <BsPeopleFill size="1.5rem" color='white' title="Contributors" />
+              <BsPeopleFill size="1.5rem" color="white" title="Contributors" />
             </Link>
 
             <a
@@ -42,15 +42,15 @@ function Header() {
               rel="noreferrer"
               className="btn btn-square btn-ghost umami--click--github-button ml-"
             >
-              <IoLogoGithub size="1.5rem" color='white' title="GitHub" />
+              <IoLogoGithub size="1.5rem" color="white" title="GitHub" />
             </a>
           </div>
-        </div>          
+        </div>
 
         <SearchBar searchBarWrapperStyles="sm:hidden px-2 mb-3" />
       </div>
     </header>
   );
 }
 
-export default Header;
+export default Header;
diff --git a/components/ReportModal.tsx b/components/ReportModal.tsx
@@ -0,0 +1,67 @@
+import { FormEvent } from 'react';
+import { useState } from 'react';
+import { GoStop } from 'react-icons/go';
+
+function ReportModal() {
+  const [message, setMessage] = useState('');
+  const handleSubmit = (e: FormEvent) => {
+    console.log(message);
+    // Handle db request here
+  };
+  const handleCloseCLick = () => {
+    const modal = document.getElementById('modal') as HTMLDialogElement;
+    if (modal) {
+      modal.close();
+    }
+  };
+  return (
+    <>
+      <div>
+        <dialog id="modal" className="modal modal-bottom sm:modal-middle">
+          <div className="modal-box md:w-11/12 w-full max-w-2xl">
+            <h3 className="font-bold text-4xl block mb-2 text-2023-manga-2">
+              Report This Repository
+            </h3>
+            <div className="modal-action flex flex-col">
+              <p className="text-2023-manga-3 text-lg">
+                Please provide as much detail as possible to explain why you are
+                reporting this repository.
+                <span className="flex gap-2  items-center font-extralight text-sm mt-2   text-2023-bavarian-red-1">
+                  <GoStop className="font-extrabold" />
+                  Note that we may remove the repository
+                </span>
+              </p>
+
+              <form method="dialog" onSubmit={handleSubmit}>
+                <textarea
+                  id="reportReason"
+                  name="message"
+                  placeholder="Why do want to report this repository......"
+                  className="textarea-lg textarea textarea-bordered textarea-ghost rounded-md w-full p-2   focus:outline-2023-bavarian-red-1 mt-6 -ml-2 text-white"
+                  onChange={e => setMessage(e.target.value)}
+                  required
+                />
+                <div className="flex mt-4 justify-end items-center ml-6 p-2 space-x-4">
+                  <button className="btn glass shadow-md bg-2023-bavarian-red-2 text-xl text-2023-manga-2 hover:bg-2023-bavarian-red-3">
+                    Report
+                  </button>
+                </div>
+              </form>
+              <button
+                className="btn btn-md text-sxl btn-circle btn-ghost absolute right-2 top-2"
+                onClick={handleCloseCLick}
+              >
+                ✕
+              </button>
+            </div>
+          </div>
+          <form method="dialog" className="modal-backdrop">
+            <button className="cursor-default">close</button>
+          </form>
+        </dialog>
+      </div>
+    </>
+  );
+}
+
+export default ReportModal;
diff --git a/components/StarsFilter.tsx b/components/StarsFilter.tsx
@@ -14,15 +14,17 @@ export default function StarsFilter() {
       startStars: !router.query.startStars
         ? ''
         : +(router.query.startStars as string),
-      endStars: !router.query.endStars
-        ? ''
-        : +(router.query.endStars as string)
+      endStars: !router.query.endStars ? '' : +(router.query.endStars as string)
     }
   });
 
   const onSubmit: SubmitHandler<FormValues> = ({ startStars, endStars }) => {
     let query;
-    if (typeof endStars === 'number' && typeof startStars === 'number' && endStars < startStars) {
+    if (
+      typeof endStars === 'number' &&
+      typeof startStars === 'number' &&
+      endStars < startStars
+    ) {
       reset({ startStars, endStars: '' });
       query = { startStars };
       const { endStars, ...rest } = router.query;
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "eslint-config-next": "13.5.2",
     "postcss": "^8.4.30",
     "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.5",
     "tailwindcss": "^3.3.3",
     "typescript": "5.2.2"
   }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -10,6 +10,7 @@ import '../styles/globals.css';
 
 import type { AppProps } from 'next/app';
 import Footer from 'components/Footer';
+import ReportModal from 'components/ReportModal';
 
 function MyApp({ Component, pageProps, router }: AppProps) {
   return (
@@ -39,6 +40,7 @@ function MyApp({ Component, pageProps, router }: AppProps) {
       <NextNProgress color="#ffd74d" options={{ showSpinner: false }} />
       <Component {...pageProps} />
       <Footer />
+      <ReportModal />
     </motion.div>
   );
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/xata.ts b/xata.ts
@@ -1,17 +1,17 @@
 // Generated by Xata Codegen 0.26.7. Please do not edit.
-import { buildClient } from "@xata.io/client";
+import { buildClient } from '@xata.io/client';
 import type {
   BaseClientOptions,
   SchemaInference,
-  XataRecord,
-} from "@xata.io/client";
+  XataRecord
+} from '@xata.io/client';
 
-const tables = [{ name: "reports", columns: [] }] as const;
+const tables = [{ name: 'reports', columns: [] }] as const;
 
 export type SchemaTables = typeof tables;
 export type InferredTypes = SchemaInference<SchemaTables>;
 
-export type Reports = InferredTypes["reports"];
+export type Reports = InferredTypes['reports'];
 export type ReportsRecord = Reports & XataRecord;
 
 export type DatabaseSchema = {
@@ -22,7 +22,7 @@ const DatabaseClient = buildClient();
 
 const defaultOptions = {
   databaseURL:
-    "https://Usman-Sabuwala-s-workspace-u2kcvd.us-east-1.xata.sh/db/project-finder-hf",
+    'https://Usman-Sabuwala-s-workspace-u2kcvd.us-east-1.xata.sh/db/project-finder-hf'
 };
 
 export class XataClient extends DatabaseClient<DatabaseSchema> {

Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,7 @@`
`40`	`40`	`"eslint-config-next": "13.5.2",`
`41`	`41`	`"postcss": "^8.4.30",`
`42`	`42`	`"prettier": "^3.0.3",`
	`43`	`+ "prettier-plugin-tailwindcss": "^0.5.5",`
`43`	`44`	`"tailwindcss": "^3.3.3",`
`44`	`45`	`"typescript": "5.2.2"`
`45`	`46`	`}`