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

34
src/pages/photogallery.tsx
View File

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