chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

palette switch style

Browse Source
This commit is contained in:
Chuck Dries 2023-01-07 15:13:59 -08:00
parent d276945f6b
commit daaf318683
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
2 changed files with 38 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Switch.tsx
View File

@ -15,7 +15,7 @@ export function Switch(props: AriaSwitchProps) {
return ( return (
<label <label
className="text-sm p-2" className="text-sm p-[3px]"
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
@ -26,31 +26,31 @@ export function Switch(props: AriaSwitchProps) {
<input {...inputProps} {...focusProps} ref={ref} /> <input {...inputProps} {...focusProps} ref={ref} />
</VisuallyHidden> </VisuallyHidden>
<svg <svg
className="flex-shrink-0"
width={40}
height={24}
aria-hidden="true" aria-hidden="true"
className="flex-shrink-0"
height={24}
style={{ marginRight: 4 }} style={{ marginRight: 4 }}
width={40}
> >
<rect <rect
x={4} fill={state.isSelected ? "green" : "gray"}
y={4}
width={32}
height={16} height={16}
rx={8} rx={8}
fill={state.isSelected ? "orange" : "gray"} width={32}
x={4}
y={4}
/> />
<circle cx={state.isSelected ? 28 : 12} cy={12} r={5} fill="white" /> <circle cx={state.isSelected ? 28 : 12} cy={12} fill="white" r={5} />
{isFocusVisible && ( {isFocusVisible && (
<rect <rect
x={1} fill="none"
y={1}
width={38}
height={22} height={22}
rx={11} rx={11}
fill="none" stroke="green"
stroke="orange"
strokeWidth={2} strokeWidth={2}
width={38}
x={1}
y={1}
/> />
)} )}
</svg> </svg>

34
src/pages/photogallery.tsx
View File

@ -6,10 +6,15 @@ import { Helmet } from "react-helmet";
import MasonryGallery from "../components/MasonryGallery"; import MasonryGallery from "../components/MasonryGallery";
import KeywordsPicker from "../components/KeywordsPicker"; import KeywordsPicker from "../components/KeywordsPicker";
import { getGalleryPageUrl, getHelmetSafeBodyStyle, getVibrantStyle } from "../utils"; import {
getGalleryPageUrl,
getHelmetSafeBodyStyle,
getVibrantStyle,
} from "../utils";
import Nav from "../components/Nav"; import Nav from "../components/Nav";
import { Item, Select } from "../components/Select"; import { Item, Select } from "../components/Select";
import { Switch } from "../components/Switch"; import { Switch } from "../components/Switch";
import ColorPalette from "@spectrum-icons/workflow/ColorPalette";
const SORT_KEYS = { const SORT_KEYS = {
hue: ["fields", "imageMeta", "vibrantHue"], hue: ["fields", "imageMeta", "vibrantHue"],
@ -168,14 +173,16 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
<body <body
className="bg-white transition-color" className="bg-white transition-color"
// @ts-ignore // @ts-ignore
style={getHelmetSafeBodyStyle(getVibrantStyle({ style={getHelmetSafeBodyStyle(
Muted: [0, 0, 0], getVibrantStyle({
LightMuted: [0, 0, 0], Muted: [0, 0, 0],
Vibrant: [0, 0, 0], LightMuted: [0, 0, 0],
LightVibrant: [0, 0, 0], Vibrant: [0, 0, 0],
DarkMuted: [238, 238, 238], LightVibrant: [0, 0, 0],
DarkVibrant: [238, 238, 238], DarkMuted: [238, 238, 238],
}))} DarkVibrant: [238, 238, 238],
})
)}
/> />
</Helmet> </Helmet>
<div className="top-0 z-10"> <div className="top-0 z-10">
@ -210,12 +217,19 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
value={filterKeyword} value={filterKeyword}
/> />
<div className="m-2 flex flex-row items-end"> <div className="m-2 flex flex-row items-end">
<div className="border border-black rounded mr-2">
<Switch <Switch
isSelected={showPalette} isSelected={showPalette}
onChange={(val) => setShowPalette(val)} onChange={(val) => setShowPalette(val)}
> >
Show palettes <ColorPalette
UNSAFE_style={{
width: "24px",
margin: "0 4px",
}}
/>
</Switch> </Switch>
</div>
<Select <Select
label="Sort by..." label="Sort by..."
// @ts-ignore // @ts-ignore