Reusable UI Components
Relevant source files
The following files were used as context for generating this wiki page:
The TrueLens project utilizes a modular architecture for its user interface, relying on a suite of reusable React components designed with Tailwind CSS and Framer Motion. These components are centralized to ensure visual consistency across the "Scan", "Results", and "Dashboard" views while providing specialized data visualization for trust scores and analysis signals.
The system leverages global design tokens defined in CSS variables to manage a "dark mode" aesthetic, featuring glassmorphism effects, brand-specific gradients (deep purple to violet), and semantic color coding for status indicators (success, warning, and danger).
Global Design System and Styling
The foundation of the reusable components is a comprehensive set of design tokens and utility classes. These tokens define the brand's visual identity, including colors, border radii, and specialized animations.
Design Tokens
Key variables are defined in the global stylesheet to maintain consistency:
- Brand Colors:
--brand-mid: #7C3AEDand--brand-light: #A78BFAform the core palette. - Semantic Colors:
--success: #10B981,--warning: #F59E0B, and--danger: #EF4444are used to communicate analysis results. - Surface Styles:
.glass-cardprovides a translucent background with a 16px blur and a subtle border.
Sources: truelens-app/src/app/globals.css:4-44, truelens-app/src/app/globals.css:91-96
Specialized Utility Classes
| Class Name | Purpose | Implementation Detail |
|---|---|---|
btn-primary | Main action buttons | Linear gradient with a hover glow effect. |
badge | Status labeling | Capsules with low-opacity backgrounds and high-contrast text. |
shimmer | Loading states | Linear gradient animation for skeleton screens. |
pulse-glow | Success/Active state | Infinite box-shadow expansion animation. |
Sources: truelens-app/src/app/globals.css:143-170, truelens-app/src/app/globals.css:201-224, truelens-app/src/app/globals.css:246-250
Core Visualization Components
TrueLens features specific components tailored for displaying AI analysis data. These components are frequently used in the ResultsPage to break down the "Trust Score" and its contributing "Signals".
TrustScoreGauge
The TrustScoreGauge is a circular visualization component that represents the overall authenticity of scanned content. It uses a color-coded stroke that transitions based on the score value.
- High (>= 70): Green (
#10B981) - Medium (>= 40): Orange (
#F59E0B) - Low (< 40): Red (
#EF4444)
Sources: truelens-app/src/components/TrustScoreGauge.tsx, truelens-app/src/app/results/[id]/page.tsx:128-132
SignalCard
The SignalCard displays individual analysis vectors (e.g., text stylometry, domain trust, or image forensics). Each card renders:
- An icon corresponding to the signal type.
- A confidence score and descriptive label.
- A list of "highlights" or evidence items.
Sources: truelens-app/src/components/SignalCard.tsx, truelens-app/src/lib/types.ts:10-19
The diagram shows how scan result data is distributed into the primary visualization components.
Feedback and Navigation Components
These components manage user experience during transitions and provide consistent structure throughout the application.
ScanLoader
The ScanLoader provides visual feedback during the analysis process. It utilizes the .scan-line-animation class to simulate a "scanning" laser effect moving vertically over a container.
Sources: truelens-app/src/components/ScanLoader.tsx, truelens-app/src/app/globals.css:258-262
Global Footer
The Footer component provides consistent navigation and brand identity across all pages. It is structured into four columns: Brand/Socials, Product, Company, and Legal. It specifically lists the development team members and links to core features like "Document Verification" and "API Access".
Sources: truelens-app/src/components/Footer.tsx:5-90
Component Hierarchy and Data Flow
The reusable components typically receive data via typed props defined in the central types.ts library. For example, the Scan interface coordinates the relationship between scores and signals.
Class diagram illustrating the relationship between data types and UI components.
Sources: truelens-app/src/lib/types.ts:21-36, truelens-app/src/app/results/[id]/page.tsx:128-152
Implementation Example: Results View
The ResultsPage demonstrates the integration of these reusable components into a complex layout.
// Example of component integration in the results view
// Path: truelens-app/src/app/results/[id]/page.tsx
return (
<div className="max-w-4xl mx-auto">
{/* Reusable visualization of the overall score */}
<div className="glass-card p-8 mb-6 flex flex-col items-center">
<TrustScoreGauge score={scan.trustScore} size={220} />
</div>
{/* Iterative rendering of individual signal cards */}
<div className="space-y-3">
{scan.signals.map((signal, index) => (
<SignalCard key={signal.id} signal={signal} index={index} />
))}
</div>
</div>
);
Sources: truelens-app/src/app/results/[id]/page.tsx:128-152
The reusable UI component system in TrueLens allows for rapid development of data-heavy views while maintaining a professional, consistent AI-focused aesthetic. By separating the visual logic of gauges and signal cards from the data-fetching logic in pages, the project ensures high maintainability and consistent user feedback across the analysis lifecycle.