File Manager

import { Component } from '@angular/core';
import { NgOatBadge } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-file-manager',
  imports: [NgOatBadge],
  template: `
    <div class="vstack gap-4">
      <nav class="breadcrumb">
        <a href="#">Home</a>
        <a href="#">Documents</a>
        <span>Projects</span>
      </nav>

      <div class="hstack justify-between">
        <input type="search" placeholder="Search files…" class="max-w-sm" />
        <button class="btn">Upload File</button>
      </div>

      <div class="table">
        <table>
          <thead>
            <tr><th>Name</th><th>Type</th><th>Size</th><th>Modified</th></tr>
          </thead>
          <tbody>
            @for (file of files; track file.name) {
              <tr>
                <td>{{ file.icon }} {{ file.name }}</td>
                <td><ng-oat-badge [variant]="file.badgeVariant">{{ file.type }}</ng-oat-badge></td>
                <td>{{ file.size }}</td>
                <td class="text-light">{{ file.modified }}</td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    </div>
  `,
})
export class FileManagerComponent {
  files = [
    { icon: '📁', name: 'src', type: 'Folder', badgeVariant: 'secondary' as const, size: '—', modified: 'Jan 15' },
    { icon: '📁', name: 'assets', type: 'Folder', badgeVariant: 'secondary' as const, size: '—', modified: 'Jan 12' },
    { icon: '📄', name: 'README.md', type: 'Markdown', badgeVariant: 'outline' as const, size: '4.2 KB', modified: 'Jan 14' },
    { icon: '📄', name: 'package.json', type: 'JSON', badgeVariant: 'success' as const, size: '1.8 KB', modified: 'Jan 15' },
  ];
}