()
| 5 | import { useCallback } from "react"; |
| 6 | |
| 7 | export default function StackSelector() { |
| 8 | const searchParams = useSearchParams(); |
| 9 | const pathname = usePathname(); |
| 10 | const stack = searchParams.get("s"); |
| 11 | const router = useRouter(); |
| 12 | |
| 13 | const onStackChoose = useCallback( |
| 14 | (s?: string) => { |
| 15 | if (!s) router.replace(pathname); |
| 16 | else router.replace(pathname + "?s=" + s); |
| 17 | }, |
| 18 | [pathname, router] |
| 19 | ); |
| 20 | |
| 21 | return ( |
| 22 | <div className="flex flex-col gap-2"> |
| 23 | <p className="text-white dark:text-blue-black text-sm uppercase font-title font-semibold"> |
| 24 | Choose your favorite stack : |
| 25 | </p> |
| 26 | <div className="bg-white px-1 py-1 rounded-[50px] shadow-2xl"> |
| 27 | <div className=" text-text-primary flex flex-row gap-2 h-12 items-center uppercase font-semibold relative text-base"> |
| 28 | <div |
| 29 | className={classNames( |
| 30 | "h-full absolute rounded-[50px] top-1/2 -translate-y-1/2 transition-all duration-500 shadow-lg", |
| 31 | stack === "symfony" |
| 32 | ? "left-full -translate-x-full bg-[#000] w-32" |
| 33 | : stack === "laravel" |
| 34 | ? "left-0 w-32 bg-[#ff2d20]" |
| 35 | : "left-1/2 bg-blue-extralight w-12 -translate-x-1/2" |
| 36 | )} |
| 37 | /> |
| 38 | <button |
| 39 | onClick={() => onStackChoose("laravel")} |
| 40 | className={classNames( |
| 41 | "flex flex-row w-32 gap-2 h-full rounded-[50px] relative items-center justify-center z-20 transition-all", |
| 42 | stack !== "laravel" |
| 43 | ? "text-[#ff2d20] hover:bg-[#ff2d20]/10" |
| 44 | : "text-white delay-200" |
| 45 | )} |
| 46 | > |
| 47 | {!stack && <div className="absolute left-0 w-40 h-12 top-0" />} |
| 48 | <svg |
| 49 | xmlns="http://www.w3.org/2000/svg" |
| 50 | viewBox="0 0 2413.7 2484.79" |
| 51 | className="w-6 fill-current" |
| 52 | > |
| 53 | <path |
| 54 | strokeWidth="0" |
| 55 | d="M2412.34 562.12c.89 3.31 1.35 6.73 1.36 10.16v533.35c0 13.93-7.45 26.8-19.54 33.74l-447.65 257.73v510.85c0 13.9-7.39 26.74-19.44 33.74l-934.44 537.92c-2.14 1.22-4.47 1.99-6.81 2.82-.87.29-1.7.83-2.63 1.07a39.134 39.134 0 01-19.93 0c-1.07-.29-2.04-.88-3.06-1.26-2.14-.78-4.37-1.46-6.42-2.63L19.54 1941.69A38.933 38.933 0 010 1907.95V307.89c0-3.5.49-6.9 1.36-10.21.29-1.12.97-2.14 1.36-3.26.73-2.04 1.41-4.13 2.48-6.03.73-1.26 1.8-2.28 2.67-3.45 1.12-1.56 2.14-3.16 3.45-4.52 1.12-1.12 2.58-1.94 3.84-2.92 1.41-1.17 2.67-2.43 4.28-3.35h.05L486.64 5.2a38.973 38.973 0 0138.89 0l467.15 268.96h.1c1.56.97 2.87 2.19 4.28 3.31 1.26.97 2.67 1.85 3.79 2.92 1.36 1.41 2.33 3.01 3.5 4.57.83 1.17 1.94 2.19 2.63 3.45 1.12 1.94 1.75 3.99 2.53 6.03.39 1.12 1.07 2.14 1.36 3.31.89 3.31 1.35 6.73 1.36 10.16v999.38l389.27-224.14v-510.9c0-3.4.49-6.85 1.36-10.11.34-1.17.97-2.19 1.36-3.31.78-2.04 1.46-4.13 2.53-6.03.73-1.26 1.8-2.28 2.63-3.45 1.17-1.56 2.14-3.16 3.5-4.52 1.12-1.12 2.53-1.94 3.79-2.92 1.46-1.17 2.72-2.43 4.28-3.35h.05l467.19-268.96a38.924 38.924 0 0138.89 0l467.15 268.96c1.65.97 2.92 2.19 4.37 3.31 1.22.97 2.63 1.85 3.74 2.92 1.36 1.41 2.33 3.01 3.5 4.57.88 1.17 1.94 2.19 2.63 3.45 1.12 1.9 1.75 3.99 2.53 6.03.44 1.12 1.07 2.14 1.36 3.31zm-76.51 521.01V639.61l-163.48 94.11-225.84 130.03v443.52l389.37-224.14h-.05zm-467.15 802.31v-443.81l-222.15 126.87-634.37 362.05v447.99l856.51-493.1zM77.87 375.22v1510.23l856.42 493.05v-447.9l-447.41-253.21-.15-.1-.19-.1c-1.51-.88-2.77-2.14-4.18-3.21-1.22-.97-2.62-1.75-3.69-2.82l-.1-.15c-1.26-1.22-2.14-2.72-3.21-4.08-.97-1.31-2.14-2.43-2.92-3.79l-.05-.15c-.87-1.46-1.41-3.21-2.04-4.86-.63-1.46-1.46-2.82-1.85-4.37v-.05c-.49-1.85-.58-3.79-.78-5.69-.19-1.46-.58-2.92-.58-4.37V599.36l-225.8-130.08-163.48-94.01v-.05zM506.13 83.85L116.91 307.89l389.13 224.05 389.17-224.09-389.18-224h.1zm202.41 1398.23l225.8-129.98V375.22l-163.48 94.11-225.84 130.03v976.87l163.53-94.16zM1907.62 348.24l-389.17 224.05 389.17 224.05 389.13-224.09-389.13-224zm-38.94 515.51l-225.84-130.03-163.48-94.11v443.52l225.8 129.98 163.53 94.16V863.75zm-895.5 999.48l570.83-325.88 285.34-162.84-388.88-223.9-447.75 257.78-408.08 234.93 388.54 219.91z" |
| 56 | ></path> |
| 57 | </svg> |
| 58 | <span>Laravel</span> |
| 59 | </button> |
| 60 | {stack ? ( |
| 61 | <button |
| 62 | onClick={() => onStackChoose(undefined)} |
| 63 | className={classNames( |
| 64 | "flex flex-row items-center justify-center size-12 rounded-full z-30 opacity-50 text-text-primary/50 hover:bg-blue-extralight/50" |
nothing calls this directly
no outgoing calls
no test coverage detected