Merge pull request #42 from State-Channel-4/feat/submit-website

Feat/submit website

app/(discover)/discover/SiteFrame.tsx

@@ -13,7 +13,11 @@ const SiteFrame: React.FC<SiteFrameProps> = ({ site }) => {
   return (
     <section className="h-full rounded-2xl">
       <div className="relative flex h-full w-full items-center justify-center overflow-hidden rounded-xl bg-secondary">
-        <iframe src={site.proxyUrl} title={site.title} className="h-full w-full" />
+        <iframe
+          src={site.proxyUrl}
+          title={site.title}
+          className="h-full w-full"
+        />
       </div>
     </section>
   )

app/(stateless-toolbar)/submit-url/components/SubmitSiteFrame.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { useState } from "react"
+import Image from "next/image"
+import BadURLDisplay from "@/assets/bad-url-display.png"
+
+interface SubmitSiteFrame {
+  url: string
+}
+
+export function SubmitSiteFrame({ url }: SubmitSiteFrame): JSX.Element {
+  const [error] = useState<Error | null>(null)
+
+  return (
+    <div className="mt-2 h-[280px] rounded-2xl border border-shark-600 md:h-[239px]">
+      {error ? (
+        <div className="flex h-full items-center justify-center rounded-2xl bg-shark-200">
+          <div className="px-4 text-shark-800">
+            Can&apos;t connect. Please try a different URL
+          </div>
+        </div>
+      ) : url ? (
+        <iframe
+          className="h-full w-full rounded-2xl"
+          src={url}
+          title="Website Preview"
+        />
+      ) : (
+        <Image
+          alt="No URL"
+          className="h-full w-full rounded-2xl"
+          src={BadURLDisplay}
+        />
+      )}
+    </div>
+  )
+}

app/(stateless-toolbar)/submit-url/components/TagSelect.tsx

@@ -0,0 +1,93 @@
+import { MouseEvent, useMemo, useRef, useState } from "react"
+import { ChevronDown, X } from "lucide-react"
+
+import { useOutsideAlerter } from "@/app/hooks/useOutsideAlerter"
+
+interface SelectProps {
+  error?: boolean
+  errorMsg: string
+  onRemove: (index: number) => void
+  onSelect: (option: string) => void
+  options: Array<string>
+  selected: Array<string>
+}
+
+export default function Select({
+  error,
+  errorMsg,
+  onRemove,
+  onSelect,
+  options,
+  selected,
+}: SelectProps): JSX.Element {
+  const selectRef = useRef(null)
+  const [expanded, setExpanded] = useState(false)
+
+  const filteredOptions = useMemo(() => {
+    return options.filter((option) => !selected.includes(option))
+  }, [options, selected])
+
+  const removeSelection = (
+    event: MouseEvent<HTMLDivElement, MouseEvent>,
+    index: number
+  ) => {
+    event.stopPropagation()
+    onRemove(index)
+  }
+
+  useOutsideAlerter(selectRef, () => setExpanded(false))
+
+  return (
+    <>
+      <div
+        className={`relative mt-3 flex h-12 w-full cursor-pointer items-center justify-between rounded-lg border-[1.5px] ${
+          error ? "border-red-500" : "border-shark-800"
+        }
+         px-3`}
+        ref={selectRef}
+        onClick={() => filteredOptions.length && setExpanded(!expanded)}
+      >
+        {selected.length ? (
+          <div className="flex max-w-[90%] shrink-0 gap-2 overflow-x-auto">
+            {selected.map((option, index) => (
+              <div
+                className="flex items-center gap-1 rounded bg-shark-700 px-2 py-1 text-sm text-shark-200"
+                key={option}
+              >
+                <div>{option}</div>
+                <div
+                  className="rounded bg-shark-900 p-0.5"
+                  // @ts-ignore
+                  onClick={(e) => removeSelection(e, index)}
+                >
+                  <X size={10} />
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div />
+        )}
+        <ChevronDown className="stroke-shark-200" size={24} />
+        {expanded && (
+          <div
+            className={`absolute top-[85%] z-10 ml-[-13.5px] max-h-[100px] w-[calc(100%+3px)] overflow-y-auto rounded-b-lg border-[1.5px] border-t-0 ${
+              error ? "border-red-500" : "border-shark-800"
+            } bg-shark-950`}
+          >
+            {filteredOptions.map((option) => (
+              <div
+                className="px-4 last:rounded-b-md hover:bg-shark-700"
+                key={option}
+                onClick={() => onSelect(option)}
+              >
+                {option}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      {error && <div className="mt-1 text-xs text-red-500">{errorMsg}</div>}
+    </>
+  )
+}

app/(stateless-toolbar)/submit-url/components/slider.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useMemo, useState } from "react"
+import { Range, Root, Track } from "@radix-ui/react-slider"
+import { ArrowRight, Check, Loader2, X } from "lucide-react"
+
+interface SliderProps {
+  disabled?: boolean
+  error: Error | null
+  onSubmit: () => void
+  sending: boolean
+  sent: boolean
+}
+
+export default function Slider({
+  disabled,
+  error,
+  onSubmit,
+  sending,
+  sent,
+}: SliderProps): JSX.Element {
+  const [value, setValue] = useState(10)
+
+  const borderColor = useMemo(() => {
+    if (sent) {
+      return "border-c4-green"
+    } else if (error) {
+      return "border-red-600"
+    } else {
+      return "border-shark-600"
+    }
+  }, [error, sent])
+
+  const sliderText = useMemo(() => {
+    if (sent) {
+      return "Sent!"
+    } else if (error) {
+      return "Error occured!"
+    } else if (sending) {
+      return "Sending..."
+    } else {
+      return ""
+    }
+  }, [error, sending, sent])
+
+  // Reset progress on error reset
+  useEffect(() => {
+    if (!error) {
+      setValue(10)
+    }
+  }, [error])
+
+  // Reset progress on sent reset
+  useEffect(() => {
+    if (!sent) {
+      setValue(10)
+    }
+  }, [sent])
+
+  return (
+    <div className={`border ${borderColor} rounded-full px-1.5 py-1`}>
+      <Root
+        className="relative flex h-[48px] w-full cursor-pointer touch-none select-none items-center rounded-full"
+        disabled={disabled || !!sliderText}
+        onLostPointerCapture={() => {
+          if (value === 100) {
+            onSubmit()
+          } else {
+            setValue(10)
+          }
+        }}
+        onValueChange={([val]) => {
+          // Seems to be a bug with the radix slider where we can't set the max and min value for the range.
+          // We'll have to do it here for now unfortunately :(
+          if (val >= 10) {
+            setValue(val)
+          }
+        }}
+        step={1}
+        value={[value]}
+      >
+        <Track className="w-full">
+          {sliderText && (
+            <div className="absolute z-10 flex w-full items-center justify-between px-6">
+              <div className="text-lg text-black">{sliderText}</div>
+              {error ? (
+                <X color="black" size={24} />
+              ) : sent ? (
+                <Check color="black" size={24} />
+              ) : (
+                <div className="animate-spin">
+                  <Loader2 color="black" size={24} />
+                </div>
+              )}
+            </div>
+          )}
+          <Range className="absolute top-1/2 flex h-full -translate-y-1/2 items-center justify-end rounded-full border border-shark-600 bg-c4-gradient-separator">
+            {!sliderText && (
+              <ArrowRight
+                className={`shrink-0 ${value <= 20 ? "mx-auto" : "mx-0 mr-6"}`}
+                color="black"
+              />
+            )}
+          </Range>
+          <div className="text-center text-lg text-shark-300">
+            Slide to send to Channel4
+          </div>
+        </Track>
+      </Root>
+    </div>
+  )
+}