rattatwinko/markdownblog
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed image clicking stuff
Some checks failed
Deploy / build-and-deploy (push) Failing after 1s
Details

Browse Source
This commit is contained in:
rattatwinko
2025-06-29 21:11:03 +02:00
parent a401732d7d
commit bb83c6db33
2 changed files with 30 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/BadgeButton.tsx
View File

@@ -6,26 +6,30 @@ export default function BadgeButton({
color = '#2563eb', color = '#2563eb',
icon, icon,
onClick, onClick,
labelColor,
}: { }: {
label: string; label: string;
color?: string; color?: string;
icon: React.ReactNode; icon: React.ReactNode;
onClick?: () => void; onClick?: () => void;
labelColor?: string;
}) { }) {
return ( return (
<button <button
onClick={onClick} onClick={onClick}
className="flex items-center gap-2 h-8 px-5 font-bold tracking-wider uppercase text-white" className="flex items-center gap-1.5 h-6 sm:h-8 px-3 font-bold text-white"
style={{ style={{
background: color, background: color,
borderRadius: '4px', borderRadius: '4px',
fontFamily: 'Verdana, Geneva, DejaVu Sans, sans-serif', fontFamily: 'Verdana, Geneva, DejaVu Sans, sans-serif',
fontSize: '0.95rem', fontSize: '0.75rem',
letterSpacing: '0.08em', letterSpacing: '0.02em',
border: '1px solid rgba(0,0,0,0.1)',
boxShadow: '0 1px 2px rgba(0,0,0,0.1)',
}} }}
> >
<span className="flex items-center">{icon}</span> <span className="flex items-center">{icon}</span>
<span>{label}</span> <span style={{ color: 'white', fontWeight: 'bold' }}>{label}</span>
</button> </button>
); );
} }

43
src/app/HeaderButtons.tsx
View File

@@ -1,19 +1,17 @@
'use client'; 'use client';
import BadgeButton from './BadgeButton'; import BadgeButton from './BadgeButton';
import AboutButton from './AboutButton';
const PersonIcon = ( const LockIcon = (
<svg width="18" height="18" viewBox="0 0 20 20" fill="none"> <svg width="16" height="16" viewBox="0 0 20 20" fill="none">
<circle cx="10" cy="6" r="4" fill="white" stroke="white" strokeWidth="1.5" /> <path d="M15 8H5C3.89543 8 3 8.89543 3 10V16C3 17.1046 3.89543 18 5 18H15C16.1046 18 17 17.1046 17 16V10C17 8.89543 16.1046 8 15 8Z" fill="white"/>
<rect x="3" y="13" width="14" height="5" rx="2.5" fill="white" stroke="white" strokeWidth="1.5" /> <path d="M7 8V5C7 2.79086 8.79086 1 11 1H9C11.2091 1 13 2.79086 13 5V8" stroke="white" strokeWidth="2" strokeLinecap="round"/>
</svg> </svg>
); );
const InfoIcon = ( const PersonIcon = (
<svg width="18" height="18" viewBox="0 0 20 20" fill="none"> <svg width="16" height="16" viewBox="0 0 20 20" fill="none">
<circle cx="10" cy="10" r="9" stroke="white" strokeWidth="2" /> <circle cx="10" cy="6" r="4" fill="white" stroke="white" strokeWidth="1.5" />
<rect x="9" y="8" width="2" height="6" rx="1" fill="white" /> <rect x="3" y="13" width="14" height="5" rx="2.5" fill="white" stroke="white" strokeWidth="1.5" />
<rect x="9" y="5" width="2" height="2" rx="1" fill="white" />
</svg> </svg>
); );
@@ -24,25 +22,28 @@ export default function HeaderButtons() {
href="/admin" href="/admin"
target="_self" target="_self"
rel="noopener noreferrer" rel="noopener noreferrer"
className="h-6 sm:h-8 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded" className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
> >
<img <BadgeButton
src="https://img.shields.io/badge/Admin%20Login-000000?style=for-the-badge&logo=lock&logoColor=white&labelColor=8B0000" label="ADMIN LOGIN"
alt="Admin Login" color="#000000"
className="h-6 sm:h-8" labelColor="#8B0000"
icon={LockIcon}
onClick={() => {}}
/> />
</a> </a>
{/* If your server for about me is running on a different port, change the port number here */}
<a <a
href={typeof window !== 'undefined' ? window.location.origin.replace('3000', '80') : '#'} href={typeof window !== 'undefined' ? window.location.origin.replace('3000', '80') : '#'}
target="_self" target="_self"
rel="noopener noreferrer" rel="noopener noreferrer"
className="h-6 sm:h-8 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded" className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
> >
<img <BadgeButton
src="https://img.shields.io/badge/About%20Me-000000?style=for-the-badge&logo=account&logoColor=white&labelColor=2563eb" label="ABOUT ME"
alt="About Me" color="#000000"
className="h-6 sm:h-8" labelColor="#2563eb"
icon={PersonIcon}
onClick={() => {}}
/> />
</a> </a>
</div> </div>