3306e337ed
FYI, the `dashboard-section` tag is used to show/hide the content. For everyone component in the dashboard, make sure you include it
95 lines
3.5 KiB
Text
95 lines
3.5 KiB
Text
---
|
|
import { Icon } from "astro-icon/components";
|
|
---
|
|
|
|
<div id="profileSection" class="dashboard-section">
|
|
<div class="mb-6">
|
|
<h2 class="text-2xl font-bold">Dashboard Overview</h2>
|
|
<p class="opacity-70">Welcome to your IEEE UCSD dashboard</p>
|
|
</div>
|
|
|
|
<!-- Stats Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
<div
|
|
class="stats shadow-lg bg-base-100 rounded-2xl border border-base-200 hover:border-primary transition-all duration-300 hover:-translate-y-1 transform"
|
|
>
|
|
<div class="stat">
|
|
<div class="stat-title font-medium opacity-80">
|
|
Events Attended
|
|
</div>
|
|
<div class="stat-value text-primary" id="eventsAttendedValue">
|
|
0
|
|
</div>
|
|
<div class="stat-desc flex items-center gap-2 mt-1">
|
|
<div class="badge badge-primary badge-sm">
|
|
Since joining
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="stats shadow-lg bg-base-100 rounded-2xl border border-base-200 hover:border-secondary transition-all duration-300 hover:-translate-y-1 transform"
|
|
>
|
|
<div class="stat">
|
|
<div class="stat-title font-medium opacity-80">
|
|
Loyalty Points
|
|
</div>
|
|
<div class="stat-value text-secondary" id="loyaltyPointsValue">
|
|
0
|
|
</div>
|
|
<div class="stat-desc flex items-center gap-2 mt-1">
|
|
<div
|
|
class="badge badge-secondary badge-sm"
|
|
id="loyaltyPointsChange"
|
|
>
|
|
No activity
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="stats shadow-lg bg-base-100 rounded-2xl border border-base-200 hover:border-accent transition-all duration-300 hover:-translate-y-1 transform"
|
|
>
|
|
<div class="stat">
|
|
<div class="stat-title font-medium opacity-80">
|
|
Activity Level
|
|
</div>
|
|
<div class="stat-value text-accent" id="activityLevelValue">
|
|
Low
|
|
</div>
|
|
<div class="stat-desc flex items-center gap-2 mt-1">
|
|
<div
|
|
class="badge badge-accent badge-sm"
|
|
id="activityLevelDesc"
|
|
>
|
|
New Member
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard Content -->
|
|
<div
|
|
class="card bg-base-100 shadow-lg border border-base-200 hover:border-primary transition-all duration-300 hover:-translate-y-1 transform"
|
|
>
|
|
<div class="card-body">
|
|
<h3 class="card-title text-xl font-bold flex items-center gap-3">
|
|
<div class="badge badge-primary p-3">
|
|
<Icon name="heroicons:eye" class="h-5 w-5" />
|
|
</div>
|
|
Recent Activity
|
|
</h3>
|
|
<div class="divider"></div>
|
|
<div class="py-4">
|
|
<p class="text-base-content/70 flex items-center gap-2">
|
|
<Icon
|
|
name="heroicons:question-mark-circle"
|
|
class="h-5 w-5 opacity-50"
|
|
/>
|
|
No recent activity to display.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|