Nionidh/nextgraph-test
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add example cssmodule

Browse source
This commit is contained in:
Mona Mayrhofer 2025-12-26 14:12:06 +01:00
parent ddf96e81bb
commit b4f7769375
WARNING! Although there is a key with this ID in the database it does not verify this commit! This commit is SUSPICIOUS.
GPG key ID: 374AB152BDEBA1AE
2 changed files with 66 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

31
packages/web/app/welcome/welcome.module.css Normal file
View file

@ -0,0 +1,31 @@
.welcome {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
header {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
max-width: 100vw;
padding: 4px;
img {
width: 100%;
}
}
}
.links {
max-width: 300px;
width: 100%;
padding: 0 4px;
nav {
border-radius: 48px;
border: 1px solid gray;
padding: 6px;
}
}

73
packages/web/app/welcome/welcome.tsx
View file

@ -1,46 +1,43 @@
import logoDark from "./logo-dark.svg"; import logoDark from "./logo-dark.svg";
import logoLight from "./logo-light.svg"; import logoLight from "./logo-light.svg";
import styles from "./welcome.module.css";
export function Welcome() { export function Welcome() {
return ( return (
<main className="flex items-center justify-center pt-16 pb-4"> <main className={styles.welcome}>
<div className="flex-1 flex flex-col items-center gap-16 min-h-0"> <header className="flex flex-col items-center gap-9">
<header className="flex flex-col items-center gap-9"> <img
<div className="w-[500px] max-w-[100vw] p-4"> src={logoLight}
<img alt="React Router"
src={logoLight} className="block w-full dark:hidden"
alt="React Router" />
className="block w-full dark:hidden" <img
/> src={logoDark}
<img alt="React Router"
src={logoDark} className="hidden w-full dark:block"
alt="React Router" />
className="hidden w-full dark:block" </header>
/> <div className={styles.links}>
</div> <nav className="rounded-3xl border border-gray-200 p-6 dark:border-gray-700 space-y-4">
</header> <p className="leading-6 text-gray-700 dark:text-gray-200 text-center">
<div className="max-w-[300px] w-full space-y-6 px-4"> What&apos;s next?
<nav className="rounded-3xl border border-gray-200 p-6 dark:border-gray-700 space-y-4"> </p>
<p className="leading-6 text-gray-700 dark:text-gray-200 text-center"> <ul>
What&apos;s next? {resources.map(({ href, text, icon }) => (
</p> <li key={href}>
<ul> <a
{resources.map(({ href, text, icon }) => ( className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline dark:text-blue-500"
<li key={href}> href={href}
<a target="_blank"
className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline dark:text-blue-500" rel="noreferrer"
href={href} >
target="_blank" {icon}
rel="noreferrer" {text}
> </a>
{icon} </li>
{text} ))}
</a> </ul>
</li> </nav>
))}
</ul>
</nav>
</div>
</div> </div>
</main> </main>
); );