Spaces:
Paused
Paused
File size: 2,647 Bytes
d530f14 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | "use client";
import Link from "next/link";
import { useState } from "react";
import Globe from "./_svg/Globe";
import HeroInputSubmitButton from "./Button/Button";
import HeroInputTabsMobile from "./Tabs/Mobile/Mobile";
import HeroInputTabs from "./Tabs/Tabs";
import AsciiExplosion from "@/components/shared/effects/flame/ascii-explosion";
import { Endpoint } from "@/components/shared/Playground/Context/types";
export default function HeroInput() {
const [tab, setTab] = useState<Endpoint>(Endpoint.Scrape);
const [url, setUrl] = useState<string>("");
return (
<div className="max-w-552 mx-auto w-full z-[11] lg:z-[2] rounded-20 lg:-mt-76">
<div
className="overlay bg-accent-white"
style={{
boxShadow:
"0px 0px 44px 0px rgba(0, 0, 0, 0.02), 0px 88px 56px -20px rgba(0, 0, 0, 0.03), 0px 56px 56px -20px rgba(0, 0, 0, 0.02), 0px 32px 32px -20px rgba(0, 0, 0, 0.03), 0px 16px 24px -12px rgba(0, 0, 0, 0.03), 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 0px 0px 10px #F9F9F9",
}}
/>
<label className="p-16 flex gap-8 items-center w-full relative border-b border-black-alpha-5">
<Globe />
<input
className="w-full bg-transparent text-body-input text-accent-black placeholder:text-black-alpha-48"
placeholder="https://example.com"
type="text"
value={url}
onChange={(e) => setUrl(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") {
(
document.querySelector(
".hero-input-button",
) as HTMLButtonElement
)?.click();
}
}}
/>
</label>
<div className="p-10 flex justify-between items-center relative">
<HeroInputTabs
setTab={setTab}
tab={tab}
allowedModes={[
Endpoint.Scrape,
Endpoint.Search,
Endpoint.Map,
Endpoint.Crawl,
]}
/>
<HeroInputTabsMobile
setTab={setTab}
tab={tab}
allowedModes={[
Endpoint.Scrape,
Endpoint.Search,
Endpoint.Map,
Endpoint.Crawl,
]}
/>
<Link
className="contents"
href={`/playground?endpoint=${tab}&url=${url}&autorun=true`}
>
<HeroInputSubmitButton dirty={url.length > 0} />
</Link>
</div>
<div className="h-248 top-84 cw-768 pointer-events-none absolute overflow-clip -z-10">
<AsciiExplosion className="-top-200" />
</div>
</div>
);
}
|