| | | 1 | | import { Link } from "react-router"; |
| | | 2 | | import logoDark from "./logo-dark.svg"; |
| | | 3 | | import logoLight from "./logo-light.svg"; |
| | | 4 | | |
| | 2 | 5 | | export function Welcome() { |
| | 2 | 6 | | return ( |
| | | 7 | | <main className="flex items-center justify-center pt-16 pb-4"> |
| | | 8 | | <div className="flex-1 flex flex-col items-center gap-16 min-h-0"> |
| | | 9 | | <header className="flex flex-col items-center gap-9"> |
| | | 10 | | <div className="w-[500px] max-w-[100vw] p-4"> |
| | | 11 | | <img |
| | | 12 | | src={logoLight} |
| | | 13 | | alt="React Router" |
| | | 14 | | className="block w-full dark:hidden" |
| | | 15 | | /> |
| | | 16 | | <img |
| | | 17 | | src={logoDark} |
| | | 18 | | alt="React Router" |
| | | 19 | | className="hidden w-full dark:block" |
| | | 20 | | /> |
| | | 21 | | </div> |
| | | 22 | | </header> |
| | | 23 | | <div className="max-w-[300px] w-full space-y-6 px-4"> |
| | | 24 | | <nav className="rounded-3xl border border-gray-200 p-6 dark:border-gray-700 space-y-4"> |
| | | 25 | | <p className="leading-6 text-gray-700 dark:text-gray-200 text-center"> |
| | | 26 | | What's next? |
| | | 27 | | </p> |
| | | 28 | | <ul> |
| | | 29 | | <li> |
| | | 30 | | <Link |
| | | 31 | | className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline |
| | | 32 | | to="/locations" |
| | | 33 | | > |
| | | 34 | | <LocationIcon /> |
| | | 35 | | Locations |
| | | 36 | | </Link> |
| | | 37 | | </li> |
| | 4 | 38 | | {resources.map(({ href, text, icon }) => ( |
| | 4 | 39 | | <li key={href}> |
| | | 40 | | <a |
| | | 41 | | className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underli |
| | | 42 | | href={href} |
| | | 43 | | target="_blank" |
| | | 44 | | rel="noreferrer" |
| | | 45 | | > |
| | | 46 | | {icon} |
| | | 47 | | {text} |
| | | 48 | | </a> |
| | | 49 | | </li> |
| | | 50 | | ))} |
| | | 51 | | </ul> |
| | | 52 | | </nav> |
| | | 53 | | </div> |
| | | 54 | | </div> |
| | | 55 | | </main> |
| | | 56 | | ); |
| | | 57 | | } |
| | | 58 | | |
| | 2 | 59 | | function LocationIcon() { |
| | 2 | 60 | | return ( |
| | | 61 | | <svg |
| | | 62 | | xmlns="http://www.w3.org/2000/svg" |
| | | 63 | | width="24" |
| | | 64 | | height="24" |
| | | 65 | | viewBox="0 0 24 24" |
| | | 66 | | fill="none" |
| | | 67 | | stroke="currentColor" |
| | | 68 | | strokeWidth="1.5" |
| | | 69 | | strokeLinecap="round" |
| | | 70 | | strokeLinejoin="round" |
| | | 71 | | className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300" |
| | | 72 | | > |
| | | 73 | | <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" /> |
| | | 74 | | <circle cx="12" cy="10" r="3" /> |
| | | 75 | | </svg> |
| | | 76 | | ); |
| | | 77 | | } |
| | | 78 | | |
| | 1 | 79 | | const resources = [ |
| | | 80 | | { |
| | | 81 | | href: "https://reactrouter.com/docs", |
| | | 82 | | text: "React Router Docs", |
| | | 83 | | icon: ( |
| | | 84 | | <svg |
| | | 85 | | xmlns="http://www.w3.org/2000/svg" |
| | | 86 | | width="24" |
| | | 87 | | height="20" |
| | | 88 | | viewBox="0 0 20 20" |
| | | 89 | | fill="none" |
| | | 90 | | className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300" |
| | | 91 | | > |
| | | 92 | | <path |
| | | 93 | | d="M9.99981 10.0751V9.99992M17.4688 17.4688C15.889 19.0485 11.2645 16.9853 7.13958 12.8604C3.01467 8.73546 0.9 |
| | | 94 | | strokeWidth="1.5" |
| | | 95 | | strokeLinecap="round" |
| | | 96 | | /> |
| | | 97 | | </svg> |
| | | 98 | | ), |
| | | 99 | | }, |
| | | 100 | | { |
| | | 101 | | href: "https://rmx.as/discord", |
| | | 102 | | text: "Join Discord", |
| | | 103 | | icon: ( |
| | | 104 | | <svg |
| | | 105 | | xmlns="http://www.w3.org/2000/svg" |
| | | 106 | | width="24" |
| | | 107 | | height="20" |
| | | 108 | | viewBox="0 0 24 20" |
| | | 109 | | fill="none" |
| | | 110 | | className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300" |
| | | 111 | | > |
| | | 112 | | <path |
| | | 113 | | d="M15.0686 1.25995L14.5477 1.17423L14.2913 1.63578C14.1754 1.84439 14.0545 2.08275 13.9422 2.31963C12.6461 2. |
| | | 114 | | strokeWidth="1.5" |
| | | 115 | | /> |
| | | 116 | | </svg> |
| | | 117 | | ), |
| | | 118 | | }, |
| | | 119 | | ]; |