From 7266bb339203a2a7ac2898d1ce10543ae55d24e7 Mon Sep 17 00:00:00 2001 From: nemi-notrace Date: Mon, 20 Feb 2023 11:27:46 +0100 Subject: [PATCH 01/11] wip --- .../app/components/DarkModeToggle.tsx | 53 + .../app/components/Icons.tsx | 1306 +++++++++++++++++ .../app/components/layout.tsx | 7 +- packages/repco-docs-website/app/css/app.css | 2 +- .../repco-docs-website/app/entry.client.tsx | 20 +- .../app/lib/theme-provider.tsx | 282 ++++ .../app/lib/theme.server.ts | 32 + packages/repco-docs-website/app/root.tsx | 63 +- .../app/routes/action/set-theme.tsx | 27 + packages/repco-docs-website/package.json | 6 + packages/repco-docs-website/styles/app.css | 305 ++++ .../repco-docs-website/tailwind.config.js | 12 + 12 files changed, 2093 insertions(+), 22 deletions(-) create mode 100644 packages/repco-docs-website/app/components/DarkModeToggle.tsx create mode 100644 packages/repco-docs-website/app/components/Icons.tsx create mode 100644 packages/repco-docs-website/app/lib/theme-provider.tsx create mode 100644 packages/repco-docs-website/app/lib/theme.server.ts create mode 100644 packages/repco-docs-website/app/routes/action/set-theme.tsx create mode 100644 packages/repco-docs-website/styles/app.css create mode 100644 packages/repco-docs-website/tailwind.config.js diff --git a/packages/repco-docs-website/app/components/DarkModeToggle.tsx b/packages/repco-docs-website/app/components/DarkModeToggle.tsx new file mode 100644 index 00000000..632788a1 --- /dev/null +++ b/packages/repco-docs-website/app/components/DarkModeToggle.tsx @@ -0,0 +1,53 @@ +//thx Kent +import clsx from 'clsx' +import { MoonIcon, SunIcon } from '~/components/Icons' +import { Theme, Themed, useTheme } from '~/lib/theme-provider' + +const iconTransformOrigin = { transformOrigin: '50% 100px' } +export function DarkModeToggle({ + variant = 'icon', +}: { + variant?: 'icon' | 'labelled' +}) { + const [, setTheme] = useTheme() + return ( + + ) +} diff --git a/packages/repco-docs-website/app/components/Icons.tsx b/packages/repco-docs-website/app/components/Icons.tsx new file mode 100644 index 00000000..705c2b0b --- /dev/null +++ b/packages/repco-docs-website/app/components/Icons.tsx @@ -0,0 +1,1306 @@ +import clsx from "clsx"; + +export function AppleIcon() { + return ( + + + + + ); +} + +const arrowRotationMap = { + up: "rotate-180", + right: "-rotate-90", + down: "rotate-0", + left: "rotate-90", + "top-right": "-rotate-135", +}; + +export function ArrowIcon({ + direction, + size = 32, + className, +}: { + direction: "up" | "right" | "down" | "left" | "top-right"; + size?: number; + className?: string; +}) { + return ( + + + + ); +} + +export function AwardIcon({ size = 24 }: { size?: number } = {}) { + return ( + + + + + ); +} + +export function BadgeIcon({ size = 24 }: { size?: number } = {}) { + return ( + + + + + ); +} + +export function BehanceIcon({ + size = 24, + title = "Behance", +}: { + size?: number; + title?: string; +}) { + return ( + + {title} + + + ); +} + +export function BookIcon({ size = 24 }: { size?: number } = {}) { + return ( + + + + + ); +} + +export function BriefcaseIcon({ size = 24 }: { size?: number } = {}) { + return ( + + + + + ); +} + +export function CheckCircledIcon({ + size = 36, + className, +}: { + size?: number; + className?: string; +}) { + return ( + + + + + ); +} + +export function CheckIcon() { + return ( + + + + ); +} + +export function ChevronDownIcon({ + className, + title, +}: { + className?: string; + title?: string; +}) { + return ( + + {title ? {title} : null} + + + ); +} + +export function ChevronLeftIcon() { + return ( + + + + ); +} + +export function ChevronRightIcon() { + return ( + + + + ); +} + +export function ChevronUpIcon({ + className, + title, +}: { + className?: string; + title?: string; +}) { + return ( + + {title ? {title} : null} + + + ); +} + +export function ClipboardIcon() { + return ( + + + + + + + ); +} + +export function CodeIcon({ size = 24 }: { size?: number } = {}) { + return ( + + + + + ); +} + +export function CodepenIcon({ + size = 24, + title = "Codepen", +}: { + size?: number; + title?: string; +}) { + return ( + + {title} + + + ); +} + +export function CopyIcon() { + return ( + + + + + ); +} + +export function DiscordLogo() { + return ( + + + + + + + + + + + + + + + + + + + ); +} + +export function DollarIcon({ size = 24 }: { size?: number } = {}) { + return ( + + + + + + + ); +} + +export function DribbbleIcon({ + size = 24, + title = "Dribbble", +}: { + size?: number; + title?: string; +}) { + return ( + + {title} + + + ); +} + +export function EmojiHappyIcon({ size = 24 }: { size?: number } = {}) { + return ( + + + + + + + ); +} + +export function EyeIcon({ size = 24 }: { size?: number }) { + return ( + + + + + ); +} + +export function FastForwardIcon({ size = 24 }: { size?: number } = {}) { + return ( + + + + ); +} + +export function GithubIcon({ + size = 24, + title = "GitHub", +}: { + size?: number; + title?: string; +}) { + return ( + + {title} + + + ); +} + +export function GlobeIcon({ + size = 24, + title = "Globe", +}: { + size?: number; + title?: string; +}) { + return ( + + {title} + + + + ); +} + +export function GoogleIcon() { + return ( + + + + ); +} + +export function HeartIcon({ size = 24 }: { size?: number } = {}) { + return ( + + + + ); +} + +export function InstagramIcon({ + size = 24, + title = "Instagram", +}: { + size?: number; + title?: string; +}) { + return ( + + {title} + + + + + ); +} + +export function LaptopIcon({ size = 24 }: { size?: number } = {}) { + return ( + + + + ); +} + +export function LinkedInIcon({ + size = 24, + title = "LinkedIn", +}: { + size?: number; + title?: string; +}) { + return ( + + {title} + + + + ); +} + +export function LogoutIcon() { + return ( + + + + + + ); +} + +export function MailIcon({ size = 24 }: { size?: number }) { + return ( + + + + + ); +} + +export function MenuIcon() { + return ( + + + + + + ); +} + +export function MessageIcon({ size = 24 }: { size?: number } = {}) { + return ( + + + + + ); +} + +export function MicrophoneIcon({ size = 24 }: { size?: number }) { + return ( + + + + + + ); +} + +export function MinIcon() { + return ( + + + + ); +} + +export function MoonIcon() { + return ( + + + + ); +} + +export function MugIcon({ size = 24 }: { size?: number } = {}) { + return ( + + + + ); +} + +export function PartyIcon({ size = 24 }: { size?: number }) { + return ( + + + + + + + ); +} + +export function PauseIcon({ size = 24 }: { size?: number }) { + return ( + + + + + ); +} + +export function PlayIcon() { + return ( + + + + + ); +} + +export function PlusIcon() { + return ( + + + + + ); +} + +export function RocketIcon({ size = 24 }: { size?: number } = {}) { + return ( + + + + ); +} + +export function RssIcon({ + size = 24, + title = "RSS", + className, +}: { + size?: number; + title?: string; + className?: string; +}) { + return ( + + {title} + + + + + ); +} + +export function SearchIcon() { + return ( + + + + ); +} + +export function SpinnerIcon({ + size = 24, + ...svgProps +}: { size?: number } & React.SVGProps) { + return ( + + + + + ); +} + +export function SpotifyIcon() { + return ( + + + + ); +} + +export function SquareIcon({ size = 24 }: { size?: number }) { + return ( + + + + ); +} + +export function SunIcon() { + return ( + + + + + + + + + + + + ); +} + +export function TriangleIcon({ size = 24 }: { size?: number }) { + return ( + + + + ); +} + +export function TrophyIcon({ size = 24 }: { size?: number } = {}) { + return ( + + + + ); +} + +export function TwitchIcon({ + size = 24, + title = "Twitch", +}: { + size?: number; + title?: string; +}) { + return ( + + {title} + + + ); +} + +export function TwitterIcon({ + size = 24, + title = "Twitter", +}: { + size?: number; + title?: string; +}) { + return ( + + {title} + + + ); +} + +export function UsersIcon({ size = 24 }: { size?: number } = {}) { + return ( + + + + + + + ); +} + +export function YoutubeIcon({ + size = 24, + title = "YouTube", +}: { + size?: number; + title?: string; +}) { + return ( + + {title} + + + ); +} diff --git a/packages/repco-docs-website/app/components/layout.tsx b/packages/repco-docs-website/app/components/layout.tsx index 5bd05ae7..d52d98c1 100644 --- a/packages/repco-docs-website/app/components/layout.tsx +++ b/packages/repco-docs-website/app/components/layout.tsx @@ -1,6 +1,7 @@ import { NavLink, useLocation, useParams } from '@remix-run/react' import { PropsWithChildren, useEffect, useMemo, useState } from 'react' import { Entry, EntryNode, intoFolders } from '~/lib/util' +import { DarkModeToggle } from './DarkModeToggle' import { SearchForm } from './search' type NavProps = { index: Entry[] } @@ -18,6 +19,7 @@ export function Layout(props: LayoutProps) {
{slug}
+