fix: url overflow bug fixed, validating url on input

stylessh · Jul 12, 2023 · 3cc1d79 · 3cc1d79
1 parent fe5d510
commit 3cc1d79
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/components/url-card.tsx b/components/url-card.tsx
@@ -37,18 +37,21 @@ function UrlCard({ url }: UrlCardProps) {
   return (
     <li
       key={url.id}
-      className="relative flex gap-2 px-4 py-3 transition-all bg-white border rounded-md hover:border-black group"
+      className="relative grid grid-cols-[1fr,2em] gap-4 px-4 py-3 transition-all bg-white border rounded-md hover:border-black group"
     >
-      <div className="flex-1">
+      <div className="w-full">
         <a
           href={`${host}/${url.id}`}
           target="_blank"
           rel="noopener noreferrer"
-          className="text-sm transition-all hover:underline"
+          className="text-sm transition-all hover:underline line-clamp-1"
         >
           {host}/{url.id}
         </a>
-        <p className="mt-2 text-xs text-gray-500">{url.url}</p>
+
+        <p className="w-full mt-2 text-xs text-gray-500 break-all line-clamp-1">
+          {url.url}
+        </p>
       </div>
 
       <div className="flex flex-col gap-1">

diff --git a/components/url-input.tsx b/components/url-input.tsx
@@ -10,11 +10,22 @@ import { useUrlStore } from "@/store/url"
 function UrlInput() {
   const [url, setUrl] = useState("")
   const [loading, setLoading] = useState(false)
+  const [error, setError] = useState("")
+
   const { addUrl } = useUrlStore()
 
   const handleSubmit = async () => {
+    setError("")
     if (!url) return
 
+    // validate url
+    const urlRegex = /^(ftp|http|https):\/\/[^ "]+$/
+
+    if (!urlRegex.test(url)) {
+      setError("Enter a valid url")
+      return
+    }
+
     setLoading(true)
 
     const res = await fetch("/api/url", {
@@ -58,11 +69,12 @@ function UrlInput() {
       className="relative mx-auto my-12 md:w-1/2"
     >
       <Input
-        placeholder="Enter your url"
+        placeholder="Enter your url (https://example.com)"
         value={url}
         onChange={(e) => setUrl(e.target.value)}
         onKeyUp={(e) => e.key === "Enter" && handleSubmit()}
         disabled={loading}
+        className="pr-12"
       />
 
       <Button
@@ -73,6 +85,8 @@ function UrlInput() {
       >
         <CornerDownLeft size={14} />
       </Button>
+
+      {error && <p className="mt-2 text-xs italic text-red-500">{error}</p>}
     </motion.article>
   )
 }