strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use <Badge /> in admin breadcrumbs

Browse Source
This commit is contained in:
Sam Becker 2023-11-02 17:12:22 -05:00
parent 9ebc097a4b
commit 7b113f3836
5 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/AdminChildPage.tsx
View File

@ -3,6 +3,7 @@ import Link from 'next/link';
import { FiArrowLeft } from 'react-icons/fi'; import { FiArrowLeft } from 'react-icons/fi';
import SiteGrid from './SiteGrid'; import SiteGrid from './SiteGrid';
import { cc } from '@/utility/css'; import { cc } from '@/utility/css';
import Badge from './Badge';
function AdminChildPage({ function AdminChildPage({
backPath, backPath,
@ -41,12 +42,9 @@ function AdminChildPage({
{breadcrumb && {breadcrumb &&
<> <>
<span>/</span> <span>/</span>
<span className={cc( <Badge>
'py-0.5 px-2 rounded-md bg-gray-100 dark:bg-gray-900',
'border border-gray-200 dark:border-gray-800'
)}>
{breadcrumb} {breadcrumb}
</span> </Badge>
</>} </>}
</div> </div>
{accessory && {accessory &&

16
src/components/Badge.tsx
View File

@ -6,23 +6,27 @@ export default function Badge({
uppercase, uppercase,
}: { }: {
children: React.ReactNode children: React.ReactNode
type?: 'primary' | 'text-only' type?: 'primary' | 'secondary' | 'text-only'
uppercase?: boolean uppercase?: boolean
}) { }) {
const coreStyles = () => { const baseStyles = () => {
switch (type) { switch (type) {
case 'primary': return cc( case 'primary': return cc(
'px-2 py-0.5 rounded-md bg-gray-100 dark:bg-gray-900',
'border border-gray-200 dark:border-gray-800'
);
case 'secondary': return cc(
'px-1 py-1 leading-none rounded-md', 'px-1 py-1 leading-none rounded-md',
'bg-gray-100 dark:bg-gray-800/75', 'bg-gray-100 dark:bg-gray-800/75',
'text-gray-500 dark:text-gray-400', 'text-medium',
'font-medium text-[0.7rem] tracking-wide', 'font-medium text-[0.7rem]',
); );
} }
}; };
return ( return (
<span className={cc( <span className={cc(
coreStyles(), baseStyles(),
uppercase && 'uppercase', uppercase && 'uppercase tracking-wider',
)}> )}>
{children} {children}
</span> </span>

4
src/photo/PhotoEditPageClient.tsx
View File

@ -39,7 +39,9 @@ export default function PhotoEditPageClient({
<form action={action}> <form action={action}>
<input name="photoUrl" value={photo.url} hidden readOnly /> <input name="photoUrl" value={photo.url} hidden readOnly />
<SubmitButtonWithStatus <SubmitButtonWithStatus
icon={<IconGrSync className="translate-y-[0.5px] mr-[4px]"/>} icon={<IconGrSync
className="translate-y-[-1px] sm:mr-[4px]"
/>}
> >
EXIF EXIF
</SubmitButtonWithStatus> </SubmitButtonWithStatus>

2
src/photo/PhotoLarge.tsx
View File

@ -75,7 +75,7 @@ export default function PhotoLarge({
<PhotoTags tags={tagsToShow} />} <PhotoTags tags={tagsToShow} />}
</div> </div>
{showCamera && photoHasCameraData(photo) && {showCamera && photoHasCameraData(photo) &&
<div> <div className="space-y-0.5">
<PhotoCamera <PhotoCamera
camera={camera} camera={camera}
showIcon={false} showIcon={false}

2
src/vendors/fujifilm/PhotoFujifilmSimulation.tsx vendored
View File

@ -32,7 +32,7 @@ export default function PhotoFujifilmSimulation({
className="inline-flex items-center gap-1" className="inline-flex items-center gap-1"
> >
{badged {badged
? <Badge uppercase>{renderContent()}</Badge> ? <Badge type="secondary" uppercase>{renderContent()}</Badge>
: <span className="uppercase text-medium">{renderContent()}</span>} : <span className="uppercase text-medium">{renderContent()}</span>}
<span className={cc( <span className={cc(
'translate-y-[-1.25px] text-extra-dim', 'translate-y-[-1.25px] text-extra-dim',