fuse-angular/src/app/modules/admin/apps/file-manager/details/details.component.html

<div class="flex flex-col flex-auto p-6 md:p-8">

    <!-- Close button -->
    <div class="flex items-center justify-end">
        <a
            mat-icon-button
            [routerLink]="['../../']">
            <mat-icon [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
        </a>
    </div>

    <!-- Preview -->
    <div class="mt-8 aspect-[9/6]">
        <div class="flex items-center justify-center h-full border rounded-lg bg-gray-50 dark:bg-card">
            <ng-container *ngIf="item.type === 'folder'">
                <mat-icon
                    class="icon-size-24 text-hint"
                    [svgIcon]="'heroicons_outline:folder'"></mat-icon>
            </ng-container>
            <ng-container *ngIf="item.type !== 'folder'">
                <mat-icon
                    class="icon-size-24 text-hint"
                    [svgIcon]="'heroicons_outline:document'"></mat-icon>
            </ng-container>
        </div>
    </div>

    <!-- Name & Type -->
    <div class="flex flex-col items-start mt-8">
        <div class="text-xl font-medium">{{item.name}}</div>
        <div
            class="mt-1 px-1.5 rounded text-sm font-semibold leading-5 text-white"
            [class.bg-indigo-600]="item.type === 'folder'"
            [class.bg-red-600]="item.type === 'PDF'"
            [class.bg-blue-600]="item.type === 'DOC'"
            [class.bg-green-600]="item.type === 'XLS'"
            [class.bg-gray-600]="item.type === 'TXT'"
            [class.bg-amber-600]="item.type === 'JPG'">
            {{item.type.toUpperCase()}}
        </div>
    </div>

    <!-- Information -->
    <div class="text-lg font-medium mt-8">Information</div>
    <div class="flex flex-col mt-4 border-t border-b divide-y font-medium">
        <div class="flex items-center justify-between py-3">
            <div class="text-secondary">Created By</div>
            <div>{{item.createdBy}}</div>
        </div>
        <div class="flex items-center justify-between py-3">
            <div class="text-secondary">Created At</div>
            <div>{{item.createdAt}}</div>
        </div>
        <div class="flex items-center justify-between py-3">
            <div class="text-secondary">Modified At</div>
            <div>{{item.modifiedAt}}</div>
        </div>
        <div class="flex items-center justify-between py-3">
            <div class="text-secondary">Size</div>
            <div>{{item.size}}</div>
        </div>
        <ng-container *ngIf="item.contents">
            <div class="flex items-center justify-between py-3">
                <div class="text-secondary">Contents</div>
                <div>{{item.contents}}</div>
            </div>
        </ng-container>
    </div>

    <!-- Description -->
    <div class="flex items-center justify-between mt-8">
        <div class="text-lg font-medium">Description</div>
        <button mat-icon-button>
            <mat-icon
                class="icon-size-5"
                [svgIcon]="'heroicons_solid:pencil'"></mat-icon>
        </button>
    </div>
    <div class="flex mt-2 border-t">
        <div class="py-3">
            <ng-container *ngIf="item.description">
                <div>{{item.description}}</div>
            </ng-container>
            <ng-container *ngIf="!item.description">
                <div class="italic text-secondary">Click here to add a description</div>
            </ng-container>
        </div>
    </div>

    <!-- Actions -->
    <div class="grid grid-cols-2 gap-4 w-full mt-8">
        <button
            class="flex-auto"
            mat-flat-button
            [color]="'primary'">
            Download
        </button>
        <button
            class="flex-auto"
            mat-stroked-button>
            Delete
        </button>
    </div>

</div>