雨宮蓮andGitHub
18c133d096
* refactor: landing screen * fix: code debt * feat: add settings screen * chore: clean up * feat: settings * feat: small updates
71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import type { ColumnRouteSearch } from "@lume/types";
|
|
import { cn } from "@lume/utils";
|
|
import { Link, Outlet } from "@tanstack/react-router";
|
|
import { createFileRoute } from "@tanstack/react-router";
|
|
|
|
export const Route = createFileRoute("/create-newsfeed")({
|
|
validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
|
|
return {
|
|
account: search.account,
|
|
label: search.label,
|
|
name: search.name,
|
|
};
|
|
},
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
const search = Route.useSearch();
|
|
return (
|
|
<div className="flex flex-col items-center justify-center w-full h-full gap-4">
|
|
<div className="flex flex-col items-center justify-center text-center">
|
|
<h1 className="font-serif text-2xl font-medium">
|
|
Build up your timeline.
|
|
</h1>
|
|
<p className="leading-tight text-neutral-700 dark:text-neutral-300">
|
|
Follow some people to keep up to date with them.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col w-4/5 max-w-full gap-3">
|
|
<div className="w-full h-9 shrink-0 flex items-center justify-between bg-black/5 dark:bg-white/5 rounded-lg px-0.5">
|
|
<Link
|
|
to="/create-newsfeed/users"
|
|
search={search}
|
|
className="flex-1 h-8"
|
|
>
|
|
{({ isActive }) => (
|
|
<div
|
|
className={cn(
|
|
"text-sm font-medium rounded-md h-full flex items-center justify-center",
|
|
isActive
|
|
? "bg-white dark:bg-white/20 shadow"
|
|
: "bg-transparent",
|
|
)}
|
|
>
|
|
Users
|
|
</div>
|
|
)}
|
|
</Link>
|
|
<Link
|
|
to="/create-newsfeed/f2f"
|
|
search={search}
|
|
className="flex-1 h-8"
|
|
>
|
|
{({ isActive }) => (
|
|
<div
|
|
className={cn(
|
|
"rounded-md h-full flex items-center justify-center",
|
|
isActive ? "bg-white dark:bg-white/20" : "bg-transparent",
|
|
)}
|
|
>
|
|
Friend to Friend
|
|
</div>
|
|
)}
|
|
</Link>
|
|
</div>
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|