From 0ca8823dae91cec177db9bf7b693f937d124b074 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Sun, 16 Mar 2025 15:44:55 -0500 Subject: [PATCH] Centralize icon system --- src/admin/AdminAppMenu.tsx | 42 +++++++++---------- src/admin/AdminBatchEditPanelClient.tsx | 11 ++--- src/admin/AdminBatchUploadActions.tsx | 8 ++-- src/admin/AdminOutdatedClient.tsx | 2 +- src/admin/AdminPhotoMenuClient.tsx | 23 ++++------ src/admin/EditButton.tsx | 4 +- src/admin/PhotoSyncButton.tsx | 2 +- src/app/ViewSwitcher.tsx | 14 +++++-- src/auth/SignInForm.tsx | 4 +- src/camera/PhotoCamera.tsx | 4 +- src/components/icons/IconCamera.tsx | 6 +++ src/components/icons/IconEdit.tsx | 6 +++ src/components/icons/IconFavs.tsx | 16 +++++++ src/{app => components/icons}/IconFeed.tsx | 0 src/components/icons/IconFilmSimulation.tsx | 6 +++ src/components/icons/IconFocalLength.tsx | 17 ++++++++ src/components/icons/IconFolder.tsx | 6 +++ src/{app => components/icons}/IconGrSync.tsx | 0 src/{app => components/icons}/IconGrid.tsx | 0 src/components/icons/IconHidden.tsx | 6 +++ src/components/icons/IconLens.tsx | 6 +++ src/components/icons/IconLock.tsx | 6 +++ src/components/icons/IconPhoto.tsx | 6 +++ src/components/icons/IconRecipe.tsx | 6 +++ src/{app => components/icons}/IconSearch.tsx | 0 src/components/icons/IconSelectMultiple.tsx | 28 +++++++++++++ src/components/icons/IconSignOut.tsx | 6 +++ src/components/icons/IconTag.tsx | 6 +++ src/components/icons/IconUpload.tsx | 6 +++ src/focal/PhotoFocalLength.tsx | 4 +- src/image-response/CameraImageResponse.tsx | 7 ++-- .../FocalLengthImageResponse.tsx | 16 +++---- src/image-response/LensImageResponse.tsx | 4 +- src/image-response/RecipeImageResponse.tsx | 7 ++-- src/image-response/TagImageResponse.tsx | 13 +++--- src/image-response/TemplateImageResponse.tsx | 4 +- .../components/ImagePhotoGrid.tsx | 2 +- src/lens/PhotoLens.tsx | 4 +- src/photo/PhotoGridSidebar.tsx | 23 ++++------ src/photo/PhotoLarge.tsx | 11 ++--- src/photo/form/PhotoForm.tsx | 8 ++-- src/recipe/PhotoRecipe.tsx | 4 +- src/tag/FavsTag.tsx | 18 ++++---- src/tag/PhotoTag.tsx | 4 +- 44 files changed, 252 insertions(+), 124 deletions(-) create mode 100644 src/components/icons/IconCamera.tsx create mode 100644 src/components/icons/IconEdit.tsx create mode 100644 src/components/icons/IconFavs.tsx rename src/{app => components/icons}/IconFeed.tsx (100%) create mode 100644 src/components/icons/IconFilmSimulation.tsx create mode 100644 src/components/icons/IconFocalLength.tsx create mode 100644 src/components/icons/IconFolder.tsx rename src/{app => components/icons}/IconGrSync.tsx (100%) rename src/{app => components/icons}/IconGrid.tsx (100%) create mode 100644 src/components/icons/IconHidden.tsx create mode 100644 src/components/icons/IconLens.tsx create mode 100644 src/components/icons/IconLock.tsx create mode 100644 src/components/icons/IconPhoto.tsx create mode 100644 src/components/icons/IconRecipe.tsx rename src/{app => components/icons}/IconSearch.tsx (100%) create mode 100644 src/components/icons/IconSelectMultiple.tsx create mode 100644 src/components/icons/IconSignOut.tsx create mode 100644 src/components/icons/IconTag.tsx create mode 100644 src/components/icons/IconUpload.tsx diff --git a/src/admin/AdminAppMenu.tsx b/src/admin/AdminAppMenu.tsx index 6d4880e8..0ea73823 100644 --- a/src/admin/AdminAppMenu.tsx +++ b/src/admin/AdminAppMenu.tsx @@ -11,19 +11,20 @@ import { PATH_GRID_INFERRED, } from '@/app/paths'; import { useAppState } from '@/state/AppState'; -import { ImCheckboxUnchecked } from 'react-icons/im'; -import { IoArrowDown, IoArrowUp, IoCloseSharp } from 'react-icons/io5'; +import { IoArrowDown, IoArrowUp } from 'react-icons/io5'; import { clsx } from 'clsx/lite'; -import { TbChecklist, TbPhoto } from 'react-icons/tb'; -import { FiTag } from 'react-icons/fi'; -import { BiLockAlt } from 'react-icons/bi'; import AdminAppInfoIcon from './AdminAppInfoIcon'; -import { PiSignOutBold } from 'react-icons/pi'; import { signOutAction } from '@/auth/actions'; import { ComponentProps } from 'react'; -import { FaRegFolderOpen } from 'react-icons/fa'; -import { FiUploadCloud } from 'react-icons/fi'; import useIsKeyBeingPressed from '@/utility/useIsKeyBeingPressed'; +import IconSelectMultiple from '@/components/icons/IconSelectMultiple'; +import IconPhoto from '@/components/icons/IconPhoto'; +import IconUpload from '@/components/icons/IconUpload'; +import IconRecipe from '@/components/icons/IconRecipe'; +import IconTag from '@/components/icons/IconTag'; +import IconFolder from '@/components/icons/IconFolder'; +import IconSignOut from '@/components/icons/IconSignOut'; +import IconLock from '@/components/icons/IconLock'; export default function AdminAppMenu({ active, @@ -54,7 +55,7 @@ export default function AdminAppMenu({ const items: ComponentProps['items'] = [{ label: 'Upload Photos', - icon: , @@ -73,7 +74,7 @@ export default function AdminAppMenu({ ...photosCountTotal && { annotation: `${photosCountTotal}`, }, - icon: , @@ -85,7 +86,7 @@ export default function AdminAppMenu({ items.push({ label: 'Uploads', annotation: `${uploadsCount}`, - icon: , @@ -97,7 +98,7 @@ export default function AdminAppMenu({ items.push({ label: 'Manage Tags', annotation: `${tagsCount}`, - icon: , @@ -109,7 +110,7 @@ export default function AdminAppMenu({ items.push({ label: 'Manage Recipes', annotation: `${recipesCount}`, - icon: , @@ -122,13 +123,7 @@ export default function AdminAppMenu({ label: isSelecting ? 'Exit Select' : 'Edit Multiple', - icon: isSelecting - ? - : , + icon: , href: PATH_GRID_INFERRED, action: () => { if (isSelecting) { @@ -157,14 +152,17 @@ export default function AdminAppMenu({ : PATH_ADMIN_CONFIGURATION, }, { label: 'Sign Out', - icon: , + icon: , action: () => signOutAction().then(clearAuthStateAndRedirect), }); return ( - + Admin menu } icon={
setIsPerformingSelectEdit?.(false)} /> } + icon={} disabled={isPerformingSelectEdit} confirmText={`Are you sure you want to favorite ${photosText}?`} onClick={() => { @@ -132,10 +134,9 @@ export default function AdminBatchEditPanelClient({ setTags('')} disabled={isPerformingSelectEdit} + icon={} > - - Tag ... - + Tag ... } } + icon={} type="checkbox" value={favorite} onChange={setFavorite} @@ -155,7 +155,7 @@ export default function AdminBatchUploadActions({ /> } + icon={} type="checkbox" value={hidden} onChange={setHidden} diff --git a/src/admin/AdminOutdatedClient.tsx b/src/admin/AdminOutdatedClient.tsx index 89678fe7..512c65f1 100644 --- a/src/admin/AdminOutdatedClient.tsx +++ b/src/admin/AdminOutdatedClient.tsx @@ -3,7 +3,7 @@ import { Photo } from '@/photo'; import AdminPhotosTable from '@/admin/AdminPhotosTable'; import LoaderButton from '@/components/primitives/LoaderButton'; -import IconGrSync from '@/app/IconGrSync'; +import IconGrSync from '@/components/icons/IconGrSync'; import Note from '@/components/Note'; import AdminChildPage from '@/components/AdminChildPage'; import { PATH_ADMIN_PHOTOS } from '@/app/paths'; diff --git a/src/admin/AdminPhotoMenuClient.tsx b/src/admin/AdminPhotoMenuClient.tsx index 82d33769..8e85d036 100644 --- a/src/admin/AdminPhotoMenuClient.tsx +++ b/src/admin/AdminPhotoMenuClient.tsx @@ -7,7 +7,6 @@ import { syncPhotoAction, toggleFavoritePhotoAction, } from '@/photo/actions'; -import { FaRegEdit, FaRegStar, FaStar } from 'react-icons/fa'; import { Photo, deleteConfirmationTextForPhoto, @@ -21,9 +20,11 @@ import { useAppState } from '@/state/AppState'; import { RevalidatePhoto } from '@/photo/InfinitePhotoScroll'; import { MdOutlineFileDownload } from 'react-icons/md'; import MoreMenuItem from '@/components/more/MoreMenuItem'; -import IconGrSync from '@/app/IconGrSync'; +import IconGrSync from '@/components/icons/IconGrSync'; import { isPhotoOutdated } from '@/photo/outdated'; import InsightsIndicatorDot from './insights/InsightsIndicatorDot'; +import IconFavs from '@/components/icons/IconFavs'; +import IconEdit from '@/components/icons/IconEdit'; export default function AdminPhotoMenuClient({ photo, @@ -42,12 +43,10 @@ export default function AdminPhotoMenuClient({ const shouldRedirectFav = isPathFavs(path) && isFav; const shouldRedirectDelete = pathForPhoto({ photo: photo.id }) === path; - const favIconClass = 'translate-x-[-1px] translate-y-[0.5px]'; - const items = useMemo(() => { const items: ComponentProps[] = [{ label: 'Edit', - icon: , @@ -56,15 +55,11 @@ export default function AdminPhotoMenuClient({ if (includeFavorite) { items.push({ label: isFav ? 'Unfavorite' : 'Favorite', - icon: isFav - ? - : , + icon: , action: () => toggleFavoritePhotoAction( photo.id, shouldRedirectFav, diff --git a/src/admin/EditButton.tsx b/src/admin/EditButton.tsx index 6234bd4d..d6779352 100644 --- a/src/admin/EditButton.tsx +++ b/src/admin/EditButton.tsx @@ -1,5 +1,5 @@ +import IconEdit from '@/components/icons/IconEdit'; import PathLoaderButton from '@/components/primitives/PathLoaderButton'; -import { FaRegEdit } from 'react-icons/fa'; export default function EditButton ({ path, @@ -9,7 +9,7 @@ export default function EditButton ({ return ( } + icon={} > Edit diff --git a/src/admin/PhotoSyncButton.tsx b/src/admin/PhotoSyncButton.tsx index 96c6e7f3..85d5a48b 100644 --- a/src/admin/PhotoSyncButton.tsx +++ b/src/admin/PhotoSyncButton.tsx @@ -1,6 +1,6 @@ import LoaderButton from '@/components/primitives/LoaderButton'; import { syncPhotoAction } from '@/photo/actions'; -import IconGrSync from '@/app/IconGrSync'; +import IconGrSync from '@/components/icons/IconGrSync'; import { toastSuccess } from '@/toast'; import { ComponentProps, useState } from 'react'; import Tooltip from '@/components/Tooltip'; diff --git a/src/app/ViewSwitcher.tsx b/src/app/ViewSwitcher.tsx index 28554ab4..21f3322e 100644 --- a/src/app/ViewSwitcher.tsx +++ b/src/app/ViewSwitcher.tsx @@ -1,23 +1,26 @@ import Switcher from '@/components/Switcher'; import SwitcherItem from '@/components/SwitcherItem'; -import IconFeed from '@/app/IconFeed'; -import IconGrid from '@/app/IconGrid'; +import IconFeed from '@/components/icons/IconFeed'; +import IconGrid from '@/components/icons/IconGrid'; import { PATH_FEED_INFERRED, PATH_GRID_INFERRED, } from '@/app/paths'; -import IconSearch from './IconSearch'; +import IconSearch from '../components/icons/IconSearch'; import { useAppState } from '@/state/AppState'; import { GRID_HOMEPAGE_ENABLED } from './config'; import AdminAppMenu from '@/admin/AdminAppMenu'; import Spinner from '@/components/Spinner'; +import clsx from 'clsx/lite'; export type SwitcherSelection = 'feed' | 'grid' | 'admin'; export default function ViewSwitcher({ currentSelection, + className, }: { currentSelection?: SwitcherSelection + className?: string }) { const { isUserSignedIn, @@ -42,7 +45,10 @@ export default function ViewSwitcher({ />; return ( -
+
{GRID_HOMEPAGE_ENABLED ? renderItemGrid : renderItemFeed} {GRID_HOMEPAGE_ENABLED ? renderItemFeed : renderItemGrid} diff --git a/src/auth/SignInForm.tsx b/src/auth/SignInForm.tsx index 041f8863..a59e7119 100644 --- a/src/auth/SignInForm.tsx +++ b/src/auth/SignInForm.tsx @@ -19,8 +19,8 @@ import { import { useSearchParams } from 'next/navigation'; import { useAppState } from '@/state/AppState'; import { clsx } from 'clsx/lite'; -import { FiLock } from 'react-icons/fi'; import { PATH_ADMIN_PHOTOS } from '@/app/paths'; +import IconLock from '@/components/icons/IconLock'; export default function SignInForm({ includeTitle = true, @@ -71,7 +71,7 @@ export default function SignInForm({ 'flex gap-3 items-center justify-center', 'self-start text-2xl mb-3.5', )}> - + Sign in diff --git a/src/camera/PhotoCamera.tsx b/src/camera/PhotoCamera.tsx index 90d4edf3..13a63a9f 100644 --- a/src/camera/PhotoCamera.tsx +++ b/src/camera/PhotoCamera.tsx @@ -4,7 +4,7 @@ import { Camera, formatCameraText, isCameraApple } from '.'; import EntityLink, { EntityLinkExternalProps, } from '@/components/primitives/EntityLink'; -import { TbCamera } from 'react-icons/tb'; +import IconCamera from '@/components/icons/IconCamera'; export default function PhotoCamera({ camera, @@ -33,7 +33,7 @@ export default function PhotoCamera({ className="translate-x-[-1px] translate-y-[-0.5px]" size={15} /> - : } diff --git a/src/components/icons/IconCamera.tsx b/src/components/icons/IconCamera.tsx new file mode 100644 index 00000000..27dbeac3 --- /dev/null +++ b/src/components/icons/IconCamera.tsx @@ -0,0 +1,6 @@ +import { IconBaseProps } from 'react-icons'; +import { TbCamera } from 'react-icons/tb'; + +export default function IconCamera(props: IconBaseProps) { + return ; +} diff --git a/src/components/icons/IconEdit.tsx b/src/components/icons/IconEdit.tsx new file mode 100644 index 00000000..0b81ccb3 --- /dev/null +++ b/src/components/icons/IconEdit.tsx @@ -0,0 +1,6 @@ +import { IconBaseProps } from 'react-icons'; +import { FaRegEdit } from 'react-icons/fa'; + +export default function IconEdit(props: IconBaseProps) { + return ; +} diff --git a/src/components/icons/IconFavs.tsx b/src/components/icons/IconFavs.tsx new file mode 100644 index 00000000..2377f023 --- /dev/null +++ b/src/components/icons/IconFavs.tsx @@ -0,0 +1,16 @@ +import { clsx } from 'clsx/lite'; +import { IconBaseProps } from 'react-icons'; +import { FaRegStar, FaStar } from 'react-icons/fa6'; + +export default function IconFavs({ + highlight, + className, + ...props +}: IconBaseProps & { highlight?: boolean}) { + return highlight + ? + : ; +} diff --git a/src/app/IconFeed.tsx b/src/components/icons/IconFeed.tsx similarity index 100% rename from src/app/IconFeed.tsx rename to src/components/icons/IconFeed.tsx diff --git a/src/components/icons/IconFilmSimulation.tsx b/src/components/icons/IconFilmSimulation.tsx new file mode 100644 index 00000000..033f1571 --- /dev/null +++ b/src/components/icons/IconFilmSimulation.tsx @@ -0,0 +1,6 @@ +import { IconBaseProps } from 'react-icons'; +import { IoFilmOutline } from 'react-icons/io5'; + +export default function IconFilmSimulation(props: IconBaseProps) { + return ; +} diff --git a/src/components/icons/IconFocalLength.tsx b/src/components/icons/IconFocalLength.tsx new file mode 100644 index 00000000..d9f1a9c6 --- /dev/null +++ b/src/components/icons/IconFocalLength.tsx @@ -0,0 +1,17 @@ +import { IconBaseProps } from 'react-icons'; +import { TbCone } from 'react-icons/tb'; + +export default function IconFocalLength({ + style, + ...props +}: IconBaseProps) { + return ; +} diff --git a/src/components/icons/IconFolder.tsx b/src/components/icons/IconFolder.tsx new file mode 100644 index 00000000..65a339f4 --- /dev/null +++ b/src/components/icons/IconFolder.tsx @@ -0,0 +1,6 @@ +import { IconBaseProps } from 'react-icons'; +import { FaRegFolderOpen } from 'react-icons/fa'; + +export default function IconFolder(props: IconBaseProps) { + return ; +} diff --git a/src/app/IconGrSync.tsx b/src/components/icons/IconGrSync.tsx similarity index 100% rename from src/app/IconGrSync.tsx rename to src/components/icons/IconGrSync.tsx diff --git a/src/app/IconGrid.tsx b/src/components/icons/IconGrid.tsx similarity index 100% rename from src/app/IconGrid.tsx rename to src/components/icons/IconGrid.tsx diff --git a/src/components/icons/IconHidden.tsx b/src/components/icons/IconHidden.tsx new file mode 100644 index 00000000..7b886c7c --- /dev/null +++ b/src/components/icons/IconHidden.tsx @@ -0,0 +1,6 @@ +import { IconBaseProps } from 'react-icons'; +import { AiOutlineEyeInvisible } from 'react-icons/ai'; + +export default function IconHidden(props: IconBaseProps) { + return ; +} diff --git a/src/components/icons/IconLens.tsx b/src/components/icons/IconLens.tsx new file mode 100644 index 00000000..1688d365 --- /dev/null +++ b/src/components/icons/IconLens.tsx @@ -0,0 +1,6 @@ +import { IconBaseProps } from 'react-icons'; +import { RiCameraLensLine } from 'react-icons/ri'; + +export default function IconLens(props: IconBaseProps) { + return ; +} diff --git a/src/components/icons/IconLock.tsx b/src/components/icons/IconLock.tsx new file mode 100644 index 00000000..86aeeb86 --- /dev/null +++ b/src/components/icons/IconLock.tsx @@ -0,0 +1,6 @@ +import { IconBaseProps } from 'react-icons'; +import { FiLock } from 'react-icons/fi'; + +export default function IconLock(props: IconBaseProps) { + return ; +} diff --git a/src/components/icons/IconPhoto.tsx b/src/components/icons/IconPhoto.tsx new file mode 100644 index 00000000..24ee8cf4 --- /dev/null +++ b/src/components/icons/IconPhoto.tsx @@ -0,0 +1,6 @@ +import { IconBaseProps } from 'react-icons'; +import { TbPhoto } from 'react-icons/tb'; + +export default function IconPhoto(props: IconBaseProps) { + return ; +} diff --git a/src/components/icons/IconRecipe.tsx b/src/components/icons/IconRecipe.tsx new file mode 100644 index 00000000..beaf3ebf --- /dev/null +++ b/src/components/icons/IconRecipe.tsx @@ -0,0 +1,6 @@ +import { IconBaseProps } from 'react-icons'; +import { TbChecklist } from 'react-icons/tb'; + +export default function IconRecipe(props: IconBaseProps) { + return ; +} diff --git a/src/app/IconSearch.tsx b/src/components/icons/IconSearch.tsx similarity index 100% rename from src/app/IconSearch.tsx rename to src/components/icons/IconSearch.tsx diff --git a/src/components/icons/IconSelectMultiple.tsx b/src/components/icons/IconSelectMultiple.tsx new file mode 100644 index 00000000..2dd9f4e9 --- /dev/null +++ b/src/components/icons/IconSelectMultiple.tsx @@ -0,0 +1,28 @@ +import clsx from 'clsx/lite'; +import { IconBaseProps } from 'react-icons'; +import { ImCheckboxUnchecked } from 'react-icons/im'; +import { IoCloseSharp } from 'react-icons/io5'; + +export default function IconSelectMultiple({ + isSelecting, + className, + ...props +}: IconBaseProps & { isSelecting: boolean }) { + return isSelecting + ? + : ; +} diff --git a/src/components/icons/IconSignOut.tsx b/src/components/icons/IconSignOut.tsx new file mode 100644 index 00000000..0b9880e5 --- /dev/null +++ b/src/components/icons/IconSignOut.tsx @@ -0,0 +1,6 @@ +import { IconBaseProps } from 'react-icons'; +import { PiSignOutBold } from 'react-icons/pi'; + +export default function IconSignOut(props: IconBaseProps) { + return ; +} diff --git a/src/components/icons/IconTag.tsx b/src/components/icons/IconTag.tsx new file mode 100644 index 00000000..ba88f4bf --- /dev/null +++ b/src/components/icons/IconTag.tsx @@ -0,0 +1,6 @@ +import { IconBaseProps } from 'react-icons'; +import { FiTag } from 'react-icons/fi'; + +export default function IconTag(props: IconBaseProps) { + return ; +} diff --git a/src/components/icons/IconUpload.tsx b/src/components/icons/IconUpload.tsx new file mode 100644 index 00000000..10e360b9 --- /dev/null +++ b/src/components/icons/IconUpload.tsx @@ -0,0 +1,6 @@ +import { IconBaseProps } from 'react-icons'; +import { FiUploadCloud } from 'react-icons/fi'; + +export default function IconUpload(props: IconBaseProps) { + return ; +} diff --git a/src/focal/PhotoFocalLength.tsx b/src/focal/PhotoFocalLength.tsx index aedebcac..e99c3330 100644 --- a/src/focal/PhotoFocalLength.tsx +++ b/src/focal/PhotoFocalLength.tsx @@ -2,8 +2,8 @@ import { pathForFocalLength } from '@/app/paths'; import EntityLink, { EntityLinkExternalProps, } from '@/components/primitives/EntityLink'; -import { TbCone } from 'react-icons/tb'; import { formatFocalLength } from '.'; +import IconFocalLength from '@/components/icons/IconFocalLength'; export default function PhotoFocalLength({ focal, @@ -21,7 +21,7 @@ export default function PhotoFocalLength({ } + icon={} type={type} className={className} badged={badged} diff --git a/src/image-response/CameraImageResponse.tsx b/src/image-response/CameraImageResponse.tsx index 2bf545d7..cb7a5308 100644 --- a/src/image-response/CameraImageResponse.tsx +++ b/src/image-response/CameraImageResponse.tsx @@ -8,9 +8,9 @@ import { formatCameraText, isCameraApple, } from '@/camera'; -import { IoMdCamera } from 'react-icons/io'; import { NextImageSize } from '@/platforms/next-image'; import { AiFillApple } from 'react-icons/ai'; +import IconCamera from '@/components/icons/IconCamera'; export default function CameraImageResponse({ camera: cameraProp, @@ -47,10 +47,11 @@ export default function CameraImageResponse({ transform: `translateY(${-height * .002}px)`, }} /> - : , title: formatCameraText(camera).toLocaleUpperCase(), diff --git a/src/image-response/FocalLengthImageResponse.tsx b/src/image-response/FocalLengthImageResponse.tsx index 768dfc64..9674b7f6 100644 --- a/src/image-response/FocalLengthImageResponse.tsx +++ b/src/image-response/FocalLengthImageResponse.tsx @@ -3,8 +3,8 @@ import ImageCaption from './components/ImageCaption'; import ImagePhotoGrid from './components/ImagePhotoGrid'; import ImageContainer from './components/ImageContainer'; import type { NextImageSize } from '@/platforms/next-image'; -import { TbCone } from 'react-icons/tb'; import { formatFocalLength } from '@/focal'; +import IconFocalLength from '@/components/icons/IconFocalLength'; export default function FocalLengthImageResponse({ focal, @@ -32,13 +32,13 @@ export default function FocalLengthImageResponse({ width, height, fontFamily, - icon: , + icon: + + , title: formatFocalLength(focal), }} /> diff --git a/src/image-response/LensImageResponse.tsx b/src/image-response/LensImageResponse.tsx index 629f9794..1cb07f68 100644 --- a/src/image-response/LensImageResponse.tsx +++ b/src/image-response/LensImageResponse.tsx @@ -4,7 +4,7 @@ import ImagePhotoGrid from './components/ImagePhotoGrid'; import ImageContainer from './components/ImageContainer'; import { NextImageSize } from '@/platforms/next-image'; import { formatLensText, Lens, lensFromPhoto } from '@/lens'; -import { RiCameraLensLine } from 'react-icons/ri'; +import IconLens from '@/components/icons/IconLens'; export default function LensImageResponse({ lens: lensProp, @@ -33,7 +33,7 @@ export default function LensImageResponse({ width, height, fontFamily, - icon:
, diff --git a/src/image-response/TagImageResponse.tsx b/src/image-response/TagImageResponse.tsx index 0c49bd35..b1dae0d3 100644 --- a/src/image-response/TagImageResponse.tsx +++ b/src/image-response/TagImageResponse.tsx @@ -1,10 +1,11 @@ import type { Photo } from '../photo'; -import { FaStar, FaTag } from 'react-icons/fa'; import ImageCaption from './components/ImageCaption'; import ImagePhotoGrid from './components/ImagePhotoGrid'; import ImageContainer from './components/ImageContainer'; import type { NextImageSize } from '@/platforms/next-image'; import { formatTag, isTagFavs } from '@/tag'; +import IconTag from '@/components/icons/IconTag'; +import IconFavs from '@/components/icons/IconFavs'; export default function TagImageResponse({ tag, @@ -33,7 +34,7 @@ export default function TagImageResponse({ height, fontFamily, icon: isTagFavs(tag) - ? - : , title: formatTag(tag).toLocaleUpperCase(), diff --git a/src/image-response/TemplateImageResponse.tsx b/src/image-response/TemplateImageResponse.tsx index 7c42402c..881d498b 100644 --- a/src/image-response/TemplateImageResponse.tsx +++ b/src/image-response/TemplateImageResponse.tsx @@ -1,6 +1,6 @@ import { Photo } from '../photo'; -import IconFeed from '@/app/IconFeed'; -import IconGrid from '@/app/IconGrid'; +import IconFeed from '@/components/icons/IconFeed'; +import IconGrid from '@/components/icons/IconGrid'; import ImagePhotoGrid from './components/ImagePhotoGrid'; import { NextImageSize } from '@/platforms/next-image'; diff --git a/src/image-response/components/ImagePhotoGrid.tsx b/src/image-response/components/ImagePhotoGrid.tsx index e7958fce..da5e527b 100644 --- a/src/image-response/components/ImagePhotoGrid.tsx +++ b/src/image-response/components/ImagePhotoGrid.tsx @@ -13,7 +13,7 @@ export default function ImagePhotoGrid({ widthArbitrary, height, imagePosition = 'center', - gap = 4, + gap = 0, imageStyle, }: ({ photos: Photo[] diff --git a/src/lens/PhotoLens.tsx b/src/lens/PhotoLens.tsx index b968c8ff..604bdb44 100644 --- a/src/lens/PhotoLens.tsx +++ b/src/lens/PhotoLens.tsx @@ -3,7 +3,7 @@ import { Lens, formatLensText } from '.'; import EntityLink, { EntityLinkExternalProps, } from '@/components/primitives/EntityLink'; -import { RiCameraLensLine } from 'react-icons/ri'; +import IconLens from '@/components/icons/IconLens'; export default function PhotoLens({ lens, @@ -21,7 +21,7 @@ export default function PhotoLens({ } diff --git a/src/photo/PhotoGridSidebar.tsx b/src/photo/PhotoGridSidebar.tsx index fabe506f..5e0eaf1d 100644 --- a/src/photo/PhotoGridSidebar.tsx +++ b/src/photo/PhotoGridSidebar.tsx @@ -4,12 +4,9 @@ import { Cameras, sortCamerasWithCount } from '@/camera'; import PhotoCamera from '@/camera/PhotoCamera'; import HeaderList from '@/components/HeaderList'; import PhotoTag from '@/tag/PhotoTag'; -import { FaTag } from 'react-icons/fa'; -import { IoMdCamera } from 'react-icons/io'; import { PhotoDateRange, dateRangeForPhotos, photoQuantityText } from '.'; import { TAG_FAVS, TAG_HIDDEN, Tags, addHiddenToTags } from '@/tag'; import PhotoFilmSimulation from '@/simulation/PhotoFilmSimulation'; -import PhotoFilmSimulationIcon from '@/simulation/PhotoFilmSimulationIcon'; import { FilmSimulations, sortFilmSimulationsWithCount } from '@/simulation'; import FavsTag from '../tag/FavsTag'; import { useAppState } from '@/state/AppState'; @@ -23,7 +20,10 @@ import { import { clsx } from 'clsx/lite'; import { Recipes, sortRecipesWithCount } from '@/recipe'; import PhotoRecipe from '@/recipe/PhotoRecipe'; -import { TbChecklist } from 'react-icons/tb'; +import IconCamera from '@/components/icons/IconCamera'; +import IconRecipe from '@/components/icons/IconRecipe'; +import IconTag from '@/components/icons/IconTag'; +import IconFilmSimulation from '@/components/icons/IconFilmSimulation'; export default function PhotoGridSidebar({ tags, @@ -52,8 +52,8 @@ export default function PhotoGridSidebar({ ? } items={tagsIncludingHidden.map(({ tag, count }) => { @@ -95,10 +95,7 @@ export default function PhotoGridSidebar({ ? } + icon={} items={cameras .sort(sortCamerasWithCount) .map(({ cameraKey, camera, count }) => @@ -119,7 +116,7 @@ export default function PhotoGridSidebar({ ? } @@ -141,9 +138,7 @@ export default function PhotoGridSidebar({ ? } + icon={} items={simulations .sort(sortFilmSimulationsWithCount) .map(({ simulation, count }) => diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx index 7e6bba7e..1efdeb09 100644 --- a/src/photo/PhotoLarge.tsx +++ b/src/photo/PhotoLarge.tsx @@ -284,11 +284,12 @@ export default function PhotoLarge({
{(showCameraContent || showLensContent) &&
- + {showCameraContent && + } {showLensContent && { switch (key) { case 'favorite': - return ; + return ; case 'hidden': - return ; + return ; } }; diff --git a/src/recipe/PhotoRecipe.tsx b/src/recipe/PhotoRecipe.tsx index c0fb33c0..0cf442ac 100644 --- a/src/recipe/PhotoRecipe.tsx +++ b/src/recipe/PhotoRecipe.tsx @@ -2,10 +2,10 @@ import { pathForRecipe } from '@/app/paths'; import EntityLink, { EntityLinkExternalProps, } from '@/components/primitives/EntityLink'; -import { TbChecklist } from 'react-icons/tb'; import { formatRecipe } from '.'; import clsx from 'clsx/lite'; import { RefObject } from 'react'; +import IconRecipe from '@/components/icons/IconRecipe'; export default function PhotoRecipe({ recipe, @@ -31,7 +31,7 @@ export default function PhotoRecipe({ title="Recipe" label={formatRecipe(recipe)} href={pathForRecipe(recipe)} - icon={ {TAG_FAVS} - : TAG_FAVS} href={pathForTag(TAG_FAVS)} icon={!badged && - } type={type} className={className} diff --git a/src/tag/PhotoTag.tsx b/src/tag/PhotoTag.tsx index 7af59b2b..532fcdb5 100644 --- a/src/tag/PhotoTag.tsx +++ b/src/tag/PhotoTag.tsx @@ -3,7 +3,7 @@ import { formatTag } from '.'; import EntityLink, { EntityLinkExternalProps, } from '@/components/primitives/EntityLink'; -import { FiTag } from 'react-icons/fi'; +import IconTag from '@/components/icons/IconTag'; export default function PhotoTag({ tag, @@ -21,7 +21,7 @@ export default function PhotoTag({ } + icon={} type={type} className={className} badged={badged}