mirror of
https://github.com/block-core/angor-hub-old.git
synced 2026-02-23 12:12:23 +01:00
Load project metadata from storage
This commit is contained in:
Milad Raeisi
@@ -1,37 +1,20 @@
|
||||
<div class="absolute inset-0 flex min-w-0 flex-col overflow-y-auto">
|
||||
<!-- Header -->
|
||||
<div
|
||||
class="dark relative flex-0 overflow-hidden bg-gray-800 px-4 py-8 sm:p-16"
|
||||
>
|
||||
<div class="dark relative flex-0 overflow-hidden bg-gray-800 px-4 py-8 sm:p-16">
|
||||
<!-- Background -->
|
||||
<svg
|
||||
class="pointer-events-none absolute inset-0"
|
||||
viewBox="0 0 960 540"
|
||||
width="100%"
|
||||
height="100%"
|
||||
preserveAspectRatio="xMidYMax slice"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
class="text-gray-700 opacity-25"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="100"
|
||||
>
|
||||
<svg class="pointer-events-none absolute inset-0" viewBox="0 0 960 540" width="100%" height="100%"
|
||||
preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
|
||||
<g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
|
||||
<circle r="234" cx="196" cy="23"></circle>
|
||||
<circle r="234" cx="790" cy="491"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="relative z-10 flex flex-col items-center">
|
||||
<h2 class="text-xl font-semibold">Explore Projects</h2>
|
||||
<div
|
||||
class="mt-1 text-center text-4xl font-extrabold leading-tight tracking-tight sm:text-7xl"
|
||||
>
|
||||
<div class="mt-1 text-center text-4xl font-extrabold leading-tight tracking-tight sm:text-7xl">
|
||||
What’s your next investment?
|
||||
</div>
|
||||
<div
|
||||
class="text-secondary mt-6 max-w-2xl text-center tracking-tight sm:text-2xl"
|
||||
>
|
||||
<div class="text-secondary mt-6 max-w-2xl text-center tracking-tight sm:text-2xl">
|
||||
Check out our projects and find your next investment
|
||||
opportunity.
|
||||
</div>
|
||||
@@ -40,185 +23,116 @@
|
||||
|
||||
<!-- Main -->
|
||||
<div class="p-6 sm:p-10">
|
||||
<div
|
||||
class="mx-auto flex w-full max-w-xs flex-auto flex-col sm:max-w-5xl"
|
||||
>
|
||||
<div class="mx-auto flex w-full max-w-xs flex-auto flex-col sm:max-w-5xl">
|
||||
<!-- Filters -->
|
||||
<div
|
||||
class="flex w-full max-w-xs flex-col items-center justify-between sm:max-w-none sm:flex-row"
|
||||
>
|
||||
<div class="flex w-full max-w-xs flex-col items-center justify-between sm:max-w-none sm:flex-row">
|
||||
<!-- Search bar with clear button -->
|
||||
<div class="flex w-full items-center space-x-2 sm:w-auto">
|
||||
<mat-form-field
|
||||
class="mt-4 w-full sm:w-80"
|
||||
[subscriptSizing]="'dynamic'"
|
||||
>
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:magnifying-glass'"
|
||||
></mat-icon>
|
||||
<input
|
||||
|
||||
placeholder="Search ..."
|
||||
matInput
|
||||
#query
|
||||
/>
|
||||
<mat-form-field class="mt-4 w-full sm:w-80" [subscriptSizing]="'dynamic'">
|
||||
<mat-icon matPrefix class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:magnifying-glass'"></mat-icon>
|
||||
<input placeholder="Search ..." matInput #query />
|
||||
</mat-form-field>
|
||||
<!-- Clear search button -->
|
||||
<button
|
||||
mat-icon-button
|
||||
color="warn"
|
||||
*ngIf="showCloseSearchButton"
|
||||
(click)="resetSearch(query)"
|
||||
class="mt-4"
|
||||
>
|
||||
<mat-icon
|
||||
[svgIcon]="'heroicons_solid:x-mark'"
|
||||
></mat-icon>
|
||||
<button mat-icon-button color="warn" class="mt-4">
|
||||
<mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
color="success"
|
||||
*ngIf="!showCloseSearchButton"
|
||||
(click)="filterByQuery(query.value)"
|
||||
class="mt-4"
|
||||
>
|
||||
<mat-icon
|
||||
[svgIcon]="'heroicons_solid:magnifying-glass'"
|
||||
></mat-icon>
|
||||
<button mat-icon-button color="success" class="mt-4">
|
||||
<mat-icon [svgIcon]="'heroicons_solid:magnifying-glass'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Toggle completed -->
|
||||
<mat-slide-toggle
|
||||
class="mt-8 sm:ml-auto sm:mt-0"
|
||||
[color]="'primary'"
|
||||
|
||||
>
|
||||
<mat-slide-toggle class="mt-8 sm:ml-auto sm:mt-0" [color]="'primary'">
|
||||
Hide completed
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto flex w-full flex-auto flex-col sm:max-w-5xl">
|
||||
<!-- Project Cards -->
|
||||
<div
|
||||
class="mt-10 grid w-full min-w-0 grid-cols-1 gap-6 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2"
|
||||
>
|
||||
<div class="mt-10 grid w-full min-w-0 grid-cols-1 gap-6 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2">
|
||||
<!-- Loop through projects and render cards -->
|
||||
<ng-container *ngFor="let project of projects; trackBy: trackByFn">
|
||||
<angor-card class="filter-info flex w-full flex-col">
|
||||
<div class="flex h-32">
|
||||
<img
|
||||
class="object-cover"
|
||||
[src]="'images/pages/profile/cover.jpg'"
|
||||
|
||||
|
||||
|
||||
<img class="object-cover" [src]="project.banner || '/images/pages/profile/cover.jpg'" alt="Card cover image"
|
||||
onerror="this.onerror=null; this.src='/images/pages/profile/cover.jpg';"
|
||||
alt="Card cover image"
|
||||
/>
|
||||
alt="Card cover image" />
|
||||
</div>
|
||||
<div class="flex px-8">
|
||||
<div class="bg-card -mt-12 rounded-full p-1">
|
||||
<img
|
||||
class="h-24 w-24 rounded-full object-cover"
|
||||
[src]="
|
||||
|
||||
<img class="h-24 w-24 rounded-full object-cover" [src]="
|
||||
project.picture ||
|
||||
'images/avatars/avatar-placeholder.png'
|
||||
"
|
||||
onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
|
||||
alt="Project logo"
|
||||
/>
|
||||
" onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
|
||||
alt="Project logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col px-8 pb-6 pt-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="min-w-0 flex-1">
|
||||
@if (project.displayName || project.name) {
|
||||
<div
|
||||
class="truncate text-2xl font-semibold leading-tight"
|
||||
role="button"
|
||||
(click)="
|
||||
<div class="truncate text-2xl font-semibold leading-tight" role="button" (click)="
|
||||
goToProjectDetails(project)
|
||||
"
|
||||
>
|
||||
{{
|
||||
project.displayName ||
|
||||
project.nostrPubKey
|
||||
}}
|
||||
</div>
|
||||
">
|
||||
{{
|
||||
project.displayName ||
|
||||
project.nostrPubKey
|
||||
}}
|
||||
</div>
|
||||
}
|
||||
@if (
|
||||
!project.name && !project.displayName
|
||||
!project.name && !project.displayName
|
||||
) {
|
||||
<div
|
||||
class="truncate text-2xl font-semibold leading-tight"
|
||||
>
|
||||
{{
|
||||
project.displayName ||
|
||||
project.nostrPubKey
|
||||
}}
|
||||
</div>
|
||||
}
|
||||
<div
|
||||
class="text-secondary mt-1 truncate leading-tight"
|
||||
>
|
||||
<div class="truncate text-2xl font-semibold leading-tight">
|
||||
{{
|
||||
project.about ||
|
||||
'No description available'
|
||||
project.displayName ||
|
||||
project.nostrPubKey
|
||||
}}
|
||||
</div>
|
||||
}
|
||||
<div class="text-secondary mt-1 truncate leading-tight">
|
||||
{{
|
||||
project.about ||
|
||||
'No description available'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
@if (project.displayName || project.name) {
|
||||
<!-- Chat Button -->
|
||||
<div
|
||||
class="absolute top-2 right-2 flex h-10 w-10 items-center justify-center rounded-full border bg-white shadow-md"
|
||||
>
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="openChat(project.nostrPubKey)"
|
||||
>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_outline:chat-bubble-left-right'"
|
||||
></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Chat Button -->
|
||||
<div
|
||||
class="absolute top-2 right-2 flex h-10 w-10 items-center justify-center rounded-full border bg-white shadow-md">
|
||||
<button mat-icon-button (click)="openChat(project.nostrPubKey)">
|
||||
<mat-icon class="icon-size-5"
|
||||
[svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<hr class="my-6 w-full border-t" />
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="text-secondary mr-3 text-md font-medium"
|
||||
>
|
||||
<div class="text-secondary mr-3 text-md font-medium">
|
||||
{{ project.totalInvestmentsCount || 0 }}
|
||||
investors
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<ng-container
|
||||
*ngFor="
|
||||
<ng-container *ngFor="
|
||||
let investor of [].constructor(
|
||||
project.totalInvestmentsCount ||
|
||||
0
|
||||
);
|
||||
let i = index
|
||||
"
|
||||
>
|
||||
">
|
||||
<ng-container *ngIf="i < 10">
|
||||
<img
|
||||
class="text-card ring-bg-card m-0.5 h-6 w-6 rounded-full ring-2"
|
||||
<img class="text-card ring-bg-card m-0.5 h-6 w-6 rounded-full ring-2"
|
||||
[ngClass]="{
|
||||
'-ml-3':
|
||||
project.totalInvestmentsCount >
|
||||
1 && i > 0,
|
||||
}"
|
||||
[src]="
|
||||
}" [src]="
|
||||
'images/avatars/avatar-placeholder.png'
|
||||
"
|
||||
alt="Investor avatar {{
|
||||
" alt="Investor avatar {{
|
||||
i + 1
|
||||
}}"
|
||||
/>
|
||||
}}" />
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
@@ -228,31 +142,16 @@
|
||||
</ng-container>
|
||||
</div>
|
||||
<ng-container *ngIf="projects.length == 0">
|
||||
<div
|
||||
class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent"
|
||||
>
|
||||
<mat-icon
|
||||
class="icon-size-24"
|
||||
[svgIcon]="'heroicons_outline:archive-box-x-mark'"
|
||||
></mat-icon>
|
||||
<div
|
||||
class="text-secondary mt-4 text-2xl font-semibold tracking-tight"
|
||||
>
|
||||
<div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||
<mat-icon class="icon-size-24" [svgIcon]="'heroicons_outline:archive-box-x-mark'"></mat-icon>
|
||||
<div class="text-secondary mt-4 text-2xl font-semibold tracking-tight">
|
||||
No project
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Load More Button -->
|
||||
<div
|
||||
*ngIf="projects.length > 0"
|
||||
class="mt-10 flex justify-center"
|
||||
>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="loadMoreProjects()"
|
||||
[disabled]="loading"
|
||||
>
|
||||
<div *ngIf="projects.length > 0" class="mt-10 flex justify-center">
|
||||
<button mat-raised-button color="primary" (click)="loadMoreProjects()" [disabled]="loading">
|
||||
{{ loading ? 'Loading...' : 'Load More Projects' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user