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',
icon,
onClick,
labelColor,
}: {
label: string;
color?: string;
icon: React.ReactNode;
onClick?: () => void;
labelColor?: string;
}) {
return (
<button
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={{
background: color,
borderRadius: '4px',
fontFamily: 'Verdana, Geneva, DejaVu Sans, sans-serif',
fontSize: '0.95rem',
letterSpacing: '0.08em',
fontSize: '0.75rem',
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>{label}</span>
<span style={{ color: 'white', fontWeight: 'bold' }}>{label}</span>
</button>
);
}

43
src/app/HeaderButtons.tsx
View File

@@ -1,19 +1,17 @@
'use client';
import BadgeButton from './BadgeButton';
import AboutButton from './AboutButton';
const PersonIcon = (
<svg width="18" height="18" viewBox="0 0 20 20" fill="none">
<circle cx="10" cy="6" r="4" fill="white" stroke="white" strokeWidth="1.5" />
<rect x="3" y="13" width="14" height="5" rx="2.5" fill="white" stroke="white" strokeWidth="1.5" />
const LockIcon = (
<svg width="16" height="16" viewBox="0 0 20 20" fill="none">
<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"/>
<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>
);
const InfoIcon = (
<svg width="18" height="18" viewBox="0 0 20 20" fill="none">
<circle cx="10" cy="10" r="9" stroke="white" strokeWidth="2" />
<rect x="9" y="8" width="2" height="6" rx="1" fill="white" />
<rect x="9" y="5" width="2" height="2" rx="1" fill="white" />
const PersonIcon = (
<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" />
<rect x="3" y="13" width="14" height="5" rx="2.5" fill="white" stroke="white" strokeWidth="1.5" />
</svg>
);
@@ -24,25 +22,28 @@ export default function HeaderButtons() {
href="/admin"
target="_self"
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
src="https://img.shields.io/badge/Admin%20Login-000000?style=for-the-badge&logo=lock&logoColor=white&labelColor=8B0000"
alt="Admin Login"
className="h-6 sm:h-8"
<BadgeButton
label="ADMIN LOGIN"
color="#000000"
labelColor="#8B0000"
icon={LockIcon}
onClick={() => {}}
/>
</a>
{/* If your server for about me is running on a different port, change the port number here */}
<a
href={typeof window !== 'undefined' ? window.location.origin.replace('3000', '80') : '#'}
target="_self"
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
src="https://img.shields.io/badge/About%20Me-000000?style=for-the-badge&logo=account&logoColor=white&labelColor=2563eb"
alt="About Me"
className="h-6 sm:h-8"
<BadgeButton
label="ABOUT ME"
color="#000000"
labelColor="#2563eb"
icon={PersonIcon}
onClick={() => {}}
/>
</a>
</div>