Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-os/llms.txt
Use this file to discover all available pages before exploring further.
The Projects app turns a portfolio into a Windows Explorer window. Every project becomes a file entry with a name, a modified date, a size, and a colour-coded file-type icon — giving visitors an at-a-glance overview of the breadth and recency of your work while keeping the interaction model completely familiar.
Layout
The window is divided into three distinct zones stacked vertically:
- Address bar — a slim
bg-gray-100 strip containing a read-only path input styled to show C:\Users\Dev\Projects.
- Two-pane body — a flex row with a narrow left sidebar and a full-height file list on the right.
- Status bar — a footer line displaying item count and current selection state.
Address Bar
<div className="flex items-center gap-1 px-2 py-1 bg-white border border-gray-300 rounded shadow-sm w-full max-w-md">
<FolderIcon size={14} className="text-os-teal" />
<span className="text-gray-500">C:\Users\Dev\Projects</span>
</div>
w-48 bg-gray-50) renders a folder tree with three child nodes under a collapsible Projects root:
| Folder | Icon colour | State |
|---|
| Recent | text-blue-400 | Active (highlighted) |
| Favorites | text-yellow-400 | Inactive |
| Archived | text-gray-400 | Inactive |
File List
The main panel uses a three-column CSS grid (grid-cols-[2fr_1fr_1fr]) for both the header row and each file row:
| Column | Content |
|---|
| Name | File-type icon + {name}.{type} |
| Date modified | ISO date string |
| Size | Human-readable file size |
Project Data Structure
Projects are defined as a static array at the top of components/apps/ProjectsApp.js:
const projects = [
{ id: 1, name: 'E-commerce Redesign', type: 'web', size: '12MB', date: '2023-10-12', icon: FileCode2Icon },
{ id: 2, name: 'React UI Library', type: 'lib', size: '4MB', date: '2023-08-05', icon: FileJsonIcon },
{ id: 3, name: 'WebGL Particle Sim', type: 'exp', size: '28MB', date: '2024-01-20', icon: FileTerminalIcon },
{ id: 4, name: 'Legacy Dashboard', type: 'web', size: '8MB', date: '2022-11-30', icon: FileCode2Icon },
];
Icon Colour by Type
The type field drives the icon tint via a ternary class:
type value | Tailwind class | Colour |
|---|
web | text-blue-500 | Blue |
lib | text-yellow-500 | Yellow |
exp | text-purple-500 | Purple |
Interaction
Selection and opening are handled by two separate event listeners on each row:
<div
onClick={() => setSelected(project.id)}
onDoubleClick={() => alert(`Opening details for ${project.name}...`)}
className={`... ${selected === project.id ? 'bg-os-teal/20 border border-os-teal/30' : 'hover:bg-gray-100'}`}
>
- Single click — sets
selected state; the row receives a teal-tinted highlight.
- Double click — triggers an
alert placeholder. Replace this with a modal component or router.push() call to navigate to the live project.
The status bar updates reactively:
{projects.length} items | {selected ? '1 item selected' : ''}
Customising
Replace the projects array entries in components/apps/ProjectsApp.js with your own work. Use the icon guide below to pick the right icon import for each project type:
| Icon import | Use for |
|---|
FileCode2 | Web apps, front-end projects |
FileJson | Libraries, config-heavy repos |
FileTerminal | Scripts, experiments, CLIs |
Replace the onDoubleClick alert with a real action — for example, opening a detail modal or navigating to the live URL:onDoubleClick={() => window.open(project.url, '_blank')}
url field in each project object and thread it through to the handler.