}
+ icon={
}
title="date taken"
/>
}
+ icon={}
title="shutter speed"
/>
{meta.FNumber && (
}
+ icon={}
title="aperture"
/>
)}
}
+ icon={}
title="ISO"
/>
}
+ icon={
}
title="location"
/>
{(meta.Make || meta.Model) && (
}
+ icon={
}
title="camera"
/>
)}
@@ -298,7 +307,7 @@ const GalleryImage = ({ data, location: { state } }) => {
]
.filter(Boolean)
.join(" @")}
- icon={
}
+ icon={
}
title="lens"
/>
)}
diff --git a/src/components/KeywordsPicker.tsx b/src/components/KeywordsPicker.tsx
index ada91a0..6ae3747 100644
--- a/src/components/KeywordsPicker.tsx
+++ b/src/components/KeywordsPicker.tsx
@@ -1,5 +1,6 @@
import * as React from "react";
import classNames from "classnames";
+import Checkmark from "@spectrum-icons/workflow/Checkmark";
interface KeywordsPickerProps {
keywords: string[];
@@ -9,7 +10,9 @@ interface KeywordsPickerProps {
const KeywordsPicker = ({ keywords, value, onChange }: KeywordsPickerProps) => {
return (
-
Collections
+
+ Collections
+
{keywords.map((keyword) => {
const selected = value === keyword;
@@ -17,14 +20,24 @@ const KeywordsPicker = ({ keywords, value, onChange }: KeywordsPickerProps) => {
-
);
diff --git a/src/components/ListBox.tsx b/src/components/ListBox.tsx
new file mode 100644
index 0000000..e9a9adf
--- /dev/null
+++ b/src/components/ListBox.tsx
@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import * as React from "react";
+import type { AriaListBoxOptions } from "@react-aria/listbox";
+import type { ListState } from "react-stately";
+import type { Node } from "@react-types/shared";
+import { useListBox, useListBoxSection, useOption } from "react-aria";
+// import { CheckIcon } from "@heroicons/react/solid";
+import Checkmark from '@spectrum-icons/workflow/Checkmark'
+
+interface ListBoxProps extends AriaListBoxOptions {
+ listBoxRef?: React.RefObject;
+ state: ListState;
+}
+
+interface SectionProps {
+ section: Node;
+ state: ListState;
+}
+
+interface OptionProps {
+ item: Node;
+ state: ListState;
+}
+
+export function ListBox(props: ListBoxProps) {
+ let ref = React.useRef(null);
+ let { listBoxRef = ref, state } = props;
+ let { listBoxProps } = useListBox(props, state, listBoxRef);
+
+ return (
+
+ {[...state.collection].map((item) =>
+ item.type === "section" ? (
+
+ ) : (
+
+ )
+ )}
+
+ );
+}
+
+function ListBoxSection({ section, state }: SectionProps) {
+ let { itemProps, headingProps, groupProps } = useListBoxSection({
+ heading: section.rendered,
+ "aria-label": section["aria-label"]
+ });
+
+ return (
+ <>
+ -
+ {section.rendered && (
+
+ {section.rendered}
+
+ )}
+
+ {[...section.childNodes].map((node) => (
+
+ ))}
+
+
+
+ );
+}
+
+function Option({ item, state }: OptionProps) {
+ let ref = React.useRef(null);
+ let { optionProps, isDisabled, isSelected, isFocused } = useOption(
+ {
+ key: item.key
+ },
+ state,
+ ref
+ );
+
+ let text = "text-black";
+ if (isFocused || isSelected) {
+ text = "text-black";
+ } else if (isDisabled) {
+ text = "text-gray-200";
+ }
+
+ return (
+ -
+ {item.rendered}
+ {isSelected && (
+
+ )}
+
+ );
+}
diff --git a/src/components/MasonryGallery.tsx b/src/components/MasonryGallery.tsx
index c6a11a5..fdcf548 100644
--- a/src/components/MasonryGallery.tsx
+++ b/src/components/MasonryGallery.tsx
@@ -8,8 +8,8 @@ import useBreakpoint from "use-breakpoint";
// @ts-ignore
import themeBreakpoints from "../breakpoints";
import classNames from "classnames";
-import useDimensions from "react-cool-dimensions";
-import { GalleryImage } from "../pages";
+// import useDimensions from "react-cool-dimensions";
+import { GalleryImage } from "../pages/photogallery";
interface Row {
aspect: number;
@@ -36,33 +36,21 @@ const MasonryGallery = ({
}: MasonryGalleryProps) => {
const [isClient, setIsClient] = React.useState(false);
React.useEffect(() => {
- setIsClient(true)
- }, [])
+ setIsClient(true);
+ }, []);
const breakpoints = React.useMemo(
() => R.pick(R.keys(aspectTargetsByBreakpoint), themeBreakpoints),
[aspectTargetsByBreakpoint]
);
- console.log(
- "🚀 ~ file: MasonryGallery.tsx ~ line 41 ~ breakpoints",
- breakpoints
- );
- const { observe, width, currentBreakpoint } = useDimensions({
- breakpoints,
- });
+ // const { observe, currentBreakpoint } = useDimensions({
+ // breakpoints,
+ // });
- const breakpoint = currentBreakpoint.length ? currentBreakpoint : "xs";
- const containerWidth = width ? width : 320;
- // console.log(
- // "🚀 ~ file: MasonryGallery.tsx ~ line 47 ~ currentBreakpoint",
- // currentBreakpoint
- // );
+ const { breakpoint } = useBreakpoint(breakpoints, 'xs')
- // const { breakpoint } = useBreakpoint(breakpoints, "sm");
- console.log(
- "🚀 ~ file: MasonryGallery.tsx ~ line 46 ~ breakpoint",
- breakpoint
- );
+ // const breakpoint = currentBreakpoint.length ? currentBreakpoint : "xs";
+ const galleryWidth = `calc(100vw - ${ breakpoint === "xs" || breakpoint === "sm" ? "32" : "160" }px)`;
const aspectRatios = React.useMemo(
() => R.map(getAspectRatio, images).filter(Boolean),
@@ -117,10 +105,10 @@ const MasonryGallery = ({
return (
{debugHue && (
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 8ccfa6e..e52ba92 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -1,20 +1,16 @@
import React, { useState } from "react";
import classnames from "classnames";
import { Link } from "gatsby";
-import useDimensions from "react-cool-dimensions";
-
-import Menu from "@spectrum-icons/workflow/Menu";
+import { Popover } from "react-tiny-popover";
const navClasses =
"hover:underline hover:bg-transparentblack block p-3 text-vibrant-light";
-const ExternalLinks = ({ isVertical }: { isVertical: boolean }) => (
+const ExternalLinks = () => (
-
@@ -80,23 +76,22 @@ interface NavProps {
}
const Nav = ({ internalLinks, className }: NavProps) => {
- const { observe, currentBreakpoint } = useDimensions({
- breakpoints: { XS: 0, LG: 750 },
- updateOnBreakpointChange: true,
- });
const [linksMenu, setLinksMenu] = useState(false);
return (
);
};
diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx
new file mode 100644
index 0000000..96c1d60
--- /dev/null
+++ b/src/components/Popover.tsx
@@ -0,0 +1,39 @@
+import type { OverlayTriggerState } from "react-stately";
+import type { AriaPopoverProps } from "@react-aria/overlays";
+import * as React from "react";
+import { usePopover, DismissButton, Overlay } from "@react-aria/overlays";
+
+interface PopoverProps extends Omit {
+ children: React.ReactNode;
+ state: OverlayTriggerState;
+ className?: string;
+ popoverRef?: React.RefObject;
+}
+
+export function Popover(props: PopoverProps) {
+ let ref = React.useRef(null);
+ let { popoverRef = ref, state, children, className, isNonModal } = props;
+
+ let { popoverProps, underlayProps } = usePopover(
+ {
+ ...props,
+ popoverRef
+ },
+ state
+ );
+
+ return (
+
+ {!isNonModal && }
+
+ {!isNonModal && }
+ {children}
+
+
+
+ );
+}
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
new file mode 100644
index 0000000..b905f0a
--- /dev/null
+++ b/src/components/Select.tsx
@@ -0,0 +1,89 @@
+import * as React from "react";
+import type { AriaSelectProps } from "@react-types/select";
+import { useSelectState } from "react-stately";
+import {
+ useSelect,
+ HiddenSelect,
+ useButton,
+ mergeProps,
+ useFocusRing
+} from "react-aria";
+// import { SelectorIcon } from "@heroicons/react/solid";
+import ChevronDown from "@spectrum-icons/workflow/ChevronDown";
+
+import { ListBox } from "./ListBox";
+import { Popover } from "./Popover";
+
+export { Item } from "react-stately";
+
+export function Select(props: AriaSelectProps) {
+ // Create state based on the incoming props
+ let state = useSelectState(props);
+
+ // Get props for child elements from useSelect
+ let ref = React.useRef(null);
+ let { labelProps, triggerProps, valueProps, menuProps } = useSelect(
+ props,
+ state,
+ ref
+ );
+
+ // Get props for the button based on the trigger props from useSelect
+ let { buttonProps } = useButton(triggerProps, ref);
+
+ let { focusProps, isFocusVisible } = useFocusRing();
+
+ return (
+
+
+ {props.label}
+
+
+
+ {state.isOpen && (
+
+
+
+ )}
+