Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retrowin/llms.txt

Use this file to discover all available pages before exploring further.

DesktopIcon places a Windows 98–style shortcut icon on the desktop. Each icon is a 40 × 40 px inline SVG image sitting above a short white text label. On desktop browsers the icon activates on double-click, mirroring the real Windows 98 interaction model. On mobile viewports (width < 768 px) it activates on single-click for a friendlier touch experience. Activation either navigates to a React Router route via to, or calls a custom onClick handler, or both. The five built-in icon styles — computer, folder, exe, mail, and recycle — are all self-contained inline SVG data URIs, so no external image assets are required.

​
Props

​
icon
string
required
Selects which built-in SVG to render. Must be one of:
  • 'computer' — silver CRT monitor
  • 'folder' — gold open folder
  • 'exe' — white document with a blue square badge
  • 'mail' — white envelope
  • 'recycle' — trash/recycle bin outline
​
label
string
required
The text label displayed below the icon image. Rendered in a small white sans-serif font with tight leading.
​
to
string
A React Router path to navigate to when the icon is activated. If omitted, no navigation occurs on activation.
​
onClick
function
An optional custom handler called on activation, in addition to (or instead of) navigation. Useful for opening alerts, modals, or triggering side effects — for example, showing a Recycle Bin prompt.

​
Usage

import { DesktopIcon } from './components/y2k/DesktopIcon';

function Desktop() {
  return (
    <div className="relative w-full h-screen bg-win-teal p-6 flex flex-wrap gap-6 content-start">
      <DesktopIcon icon="computer" label="My Computer" to="/about" />
      <DesktopIcon icon="folder" label="Projects" to="/projects" />
      <DesktopIcon icon="exe"    label="Skills.exe" to="/skills" />
      <DesktopIcon icon="mail"   label="Guestbook" to="/contact" />
      <DesktopIcon
        icon="recycle"
        label="Recycle Bin"
        onClick={() => alert('Recycle Bin is empty!')}
      />
    </div>
  );
}

​
Behavior

​
Activation logic

Activation runs a single internal handler that (a) calls navigate(to) if to is defined and (b) calls onClick() if onClick is defined. Both can fire together. 
onDoubleClick → activate()        (desktop)
onClick       → activate()        (mobile, window.innerWidth < 768)
The onClick prop on the outer div checks window.innerWidth at call time, so resizing the window between renders is handled correctly.

​
Active / hover states

  • The icon image dims to 50 % opacity while the mouse button is held (group-active:opacity-50).
  • The label gains a semi-transparent navy background on hover (group-hover:bg-win-navy/50) and a solid navy background while active (group-active:bg-win-navy), reproducing the Windows 98 selected-icon highlight.
DesktopIcon uses useNavigate() from React Router and must be rendered inside a Router context.
You can pass both to and onClick at the same time. This is useful when you want to navigate to a route and fire a side effect (e.g. logging an analytics event) in a single activation.

Build docs developers (and LLMs) love

Get started for freeTalk to us