,...
This commit is contained in:
528
src/components/BecomeMember.jsx
Normal file
528
src/components/BecomeMember.jsx
Normal file
@@ -0,0 +1,528 @@
|
||||
import { useState } from 'react'
|
||||
import { Button } from '@/components/ui/button.jsx'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.jsx'
|
||||
import { Input } from '@/components/ui/input.jsx'
|
||||
import { Label } from '@/components/ui/label.jsx'
|
||||
import { Textarea } from '@/components/ui/textarea.jsx'
|
||||
import { Checkbox } from '@/components/ui/checkbox.jsx'
|
||||
import { Badge } from '@/components/ui/badge.jsx'
|
||||
import { Globe, Mail, User, MessageSquare, CheckCircle, AlertCircle, DollarSign } from 'lucide-react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import Navigation from './Navigation.jsx'
|
||||
import { loadStripe } from '@stripe/stripe-js'
|
||||
|
||||
// Make sure to call `loadStripe` outside of a component’s render to avoid
|
||||
// recreating the Stripe object on every render.
|
||||
// This is your publishable key.
|
||||
const stripePromise = loadStripe('pk_test_TYooMQauvdEDq5XKxTMn5jxK') // Replace with your actual publishable key
|
||||
|
||||
function DirectBuy() {
|
||||
const [currentStep, setCurrentStep] = useState(1)
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
country: '',
|
||||
uniqueNamePart1: '',
|
||||
uniqueNamePart2: '',
|
||||
experience: '',
|
||||
whyInterested: '',
|
||||
tipsForInfo: '',
|
||||
newsletter: false,
|
||||
terms: false
|
||||
})
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [submitStatus, setSubmitStatus] = useState(null) // 'success', 'error', or null
|
||||
const [uniqueNameError, setUniqueNameError] = useState('')
|
||||
const [uniqueNameValid, setUniqueNameValid] = useState(false)
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { id, value, type, checked } = e.target
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[id]: type === 'checkbox' ? checked : value
|
||||
}))
|
||||
}
|
||||
|
||||
const validateUniqueNamePart = (part) => {
|
||||
const regex = /^[a-z]{6,}$/
|
||||
return regex.test(part)
|
||||
}
|
||||
|
||||
const validateStep1 = () => {
|
||||
const { name, email, uniqueNamePart1, uniqueNamePart2 } = formData
|
||||
if (!name || !email) {
|
||||
setSubmitStatus('error')
|
||||
setUniqueNameValid(false) // Set to false if other required fields are missing
|
||||
return false
|
||||
}
|
||||
|
||||
let isValid = true
|
||||
if (!validateUniqueNamePart(uniqueNamePart1)) {
|
||||
setUniqueNameError('First part must be at least 6 lowercase letters.')
|
||||
isValid = false
|
||||
} else if (!validateUniqueNamePart(uniqueNamePart2)) {
|
||||
setUniqueNameError('Second part must be at least 6 lowercase letters.')
|
||||
isValid = false
|
||||
} else {
|
||||
setUniqueNameError('')
|
||||
}
|
||||
|
||||
setUniqueNameValid(isValid)
|
||||
if (!isValid) {
|
||||
setSubmitStatus('error')
|
||||
return false
|
||||
}
|
||||
setSubmitStatus(null)
|
||||
return true
|
||||
}
|
||||
|
||||
const validateStep2 = () => {
|
||||
const { terms } = formData
|
||||
if (!terms) {
|
||||
setSubmitStatus('error')
|
||||
return false
|
||||
}
|
||||
setSubmitStatus(null)
|
||||
return true
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
setSubmitStatus(null) // Clear previous status
|
||||
if (currentStep === 1 && !validateStep1()) {
|
||||
return
|
||||
}
|
||||
if (currentStep === 2 && !validateStep2()) {
|
||||
return
|
||||
}
|
||||
setCurrentStep(prev => prev + 1)
|
||||
}
|
||||
|
||||
const handlePrev = () => {
|
||||
setSubmitStatus(null) // Clear previous status
|
||||
setCurrentStep(prev => prev - 1)
|
||||
}
|
||||
|
||||
const handleBuy = async (e) => {
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
setSubmitStatus(null)
|
||||
|
||||
try {
|
||||
// Create a Checkout Session on your backend
|
||||
// Replace with your actual API endpoint
|
||||
const response = await fetch('https://your-backend.com/create-checkout-session', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: formData.name,
|
||||
email: formData.email,
|
||||
country: formData.country,
|
||||
uniqueName: `${formData.uniqueNamePart1}.${formData.uniqueNamePart2}`,
|
||||
experience: formData.experience,
|
||||
whyInterested: formData.whyInterested,
|
||||
tipsForInfo: formData.tipsForInfo,
|
||||
newsletter: formData.newsletter,
|
||||
priceId: 'price_12345', // Replace with your actual Stripe Price ID for $20/month
|
||||
}),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to create Stripe Checkout Session')
|
||||
}
|
||||
|
||||
const { sessionId } = await response.json()
|
||||
|
||||
const stripe = await stripePromise
|
||||
const { error } = await stripe.redirectToCheckout({
|
||||
sessionId,
|
||||
})
|
||||
|
||||
if (error) {
|
||||
console.error('Stripe checkout error:', error)
|
||||
setSubmitStatus('error')
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Purchase error:', error)
|
||||
setSubmitStatus('error')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const renderStepContent = () => {
|
||||
switch (currentStep) {
|
||||
case 1:
|
||||
return (
|
||||
<>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-2xl">Step 1: Personal Information</CardTitle>
|
||||
<CardDescription>
|
||||
Tell us about yourself and choose your unique identifier.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{submitStatus === 'error' && (
|
||||
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
|
||||
<AlertCircle className="h-5 w-5 text-red-600" />
|
||||
<div>
|
||||
<h4 className="font-semibold text-red-800">Validation Error</h4>
|
||||
<p className="text-red-700">Please fill in all required fields and correct any errors.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-6">
|
||||
{/* Personal Information */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
|
||||
<User className="h-5 w-5" />
|
||||
Your Details
|
||||
</h3>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Full Name *</Label>
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Your full name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email Address *</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="country">Country/Region</Label>
|
||||
<Input
|
||||
id="country"
|
||||
type="text"
|
||||
value={formData.country}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Your country or region"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Unique Name */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
|
||||
<Globe className="h-5 w-5" />
|
||||
Choose Your Unique Name
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600">This will be your unique identifier (e.g., firstpart.secondpart). Each part must be 7 lowercase letters.</p>
|
||||
<div className="grid md:grid-cols-2 gap-4 items-end">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="uniqueNamePart1">First Part *</Label>
|
||||
<Input
|
||||
id="uniqueNamePart1"
|
||||
type="text"
|
||||
value={formData.uniqueNamePart1}
|
||||
onChange={(e) => {
|
||||
setFormData(prev => ({ ...prev, uniqueNamePart1: e.target.value.toLowerCase() }))
|
||||
setUniqueNameError('')
|
||||
}}
|
||||
placeholder="at least 6 lowercase letters"
|
||||
required
|
||||
className={uniqueNameError && formData.uniqueNamePart1 ? 'border-red-500' : uniqueNameValid && formData.uniqueNamePart1 ? 'border-green-500' : ''}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="uniqueNamePart2">Second Part *</Label>
|
||||
<Input
|
||||
id="uniqueNamePart2"
|
||||
type="text"
|
||||
value={formData.uniqueNamePart2}
|
||||
onChange={(e) => {
|
||||
setFormData(prev => ({ ...prev, uniqueNamePart2: e.target.value.toLowerCase() }))
|
||||
setUniqueNameError('')
|
||||
}}
|
||||
placeholder="at least 6 lowercase letters"
|
||||
required
|
||||
className={uniqueNameError && formData.uniqueNamePart2 ? 'border-red-500' : uniqueNameValid && formData.uniqueNamePart2 ? 'border-green-500' : ''}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{uniqueNameError && <p className="text-red-500 text-sm">{uniqueNameError}</p>}
|
||||
</div>
|
||||
|
||||
<Button type="button" onClick={handleNext} className="w-full bg-blue-600 hover:bg-blue-700 text-lg py-3">
|
||||
Next: About You & Preferences
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</>
|
||||
)
|
||||
case 2:
|
||||
return (
|
||||
<>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-2xl">Step 2: About You & Preferences</CardTitle>
|
||||
<CardDescription>
|
||||
Share more about your interests and communication preferences.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{submitStatus === 'error' && (
|
||||
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
|
||||
<AlertCircle className="h-5 w-5 text-red-600" />
|
||||
<div>
|
||||
<h4 className="font-semibold text-red-800">Validation Error</h4>
|
||||
<p className="text-red-700">Please fill in all required fields and agree to the terms.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-6">
|
||||
{/* Tell Us About Yourself (Optional) */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
|
||||
<MessageSquare className="h-5 w-5" />
|
||||
Tell Us About Yourself (Optional)
|
||||
</h3>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="experience">Relevant Experience</Label>
|
||||
<Textarea
|
||||
id="experience"
|
||||
value={formData.experience}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Tell us about your background in technology, governance, cooperatives, or related fields..."
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="whyInterested">Why are you interested in this service? *</Label>
|
||||
<Textarea
|
||||
id="whyInterested"
|
||||
value={formData.whyInterested}
|
||||
onChange={handleInputChange}
|
||||
placeholder="What motivates you to join OurWorld Coop? What do you hope to contribute or gain?"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tipsForInfo">Any tips to make info more smooth? (Optional)</Label>
|
||||
<Textarea
|
||||
id="tipsForInfo"
|
||||
value={formData.tipsForInfo}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Share any suggestions for improving our information delivery or onboarding process."
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preferences */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
|
||||
<Mail className="h-5 w-5" />
|
||||
Communication Preferences
|
||||
</h3>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="newsletter"
|
||||
checked={formData.newsletter}
|
||||
onCheckedChange={(checked) => setFormData(prev => ({ ...prev, newsletter: checked }))}
|
||||
/>
|
||||
<Label htmlFor="newsletter" className="text-sm">
|
||||
I'd like to receive updates about OurWorld Coop's development and launch
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Terms */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start space-x-2">
|
||||
<Checkbox
|
||||
id="terms"
|
||||
checked={formData.terms}
|
||||
onCheckedChange={(checked) => setFormData(prev => ({ ...prev, terms: checked }))}
|
||||
required
|
||||
/>
|
||||
<Label htmlFor="terms" className="text-sm">
|
||||
I agree to the <Link to="/terms" className="text-blue-600 hover:underline">Terms of Service</Link> and <Link to="/privacy" className="text-blue-600 hover:underline">Privacy Policy</Link> for my OurWorld Coop membership. *
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between gap-4">
|
||||
<Button type="button" onClick={handlePrev} className="w-1/2 bg-gray-300 hover:bg-gray-400 text-gray-800 text-lg py-3">
|
||||
Previous
|
||||
</Button>
|
||||
<Button type="button" onClick={handleNext} className="w-1/2 bg-blue-600 hover:bg-blue-700 text-lg py-3">
|
||||
Next: Payment
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</>
|
||||
)
|
||||
case 3:
|
||||
return (
|
||||
<>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-2xl">Step 3: Payment</CardTitle>
|
||||
<CardDescription>
|
||||
Secure your $20 USD/month membership via Stripe.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{submitStatus === 'success' && (
|
||||
<div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-3">
|
||||
<CheckCircle className="h-5 w-5 text-green-600" />
|
||||
<div>
|
||||
<h4 className="font-semibold text-green-800">Purchase Initiated!</h4>
|
||||
<p className="text-green-700">Redirecting to secure Stripe checkout...</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{submitStatus === 'error' && (
|
||||
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
|
||||
<AlertCircle className="h-5 w-5 text-red-600" />
|
||||
<div>
|
||||
<h4 className="font-semibold text-red-800">Purchase Failed</h4>
|
||||
<p className="text-red-700">There was an error processing your purchase. Please try again or contact support.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-6">
|
||||
<p className="text-md text-slate-700 text-center">
|
||||
You are about to purchase a membership to OurWorld Coop for <span className="font-bold">$20 USD per month</span>.
|
||||
</p>
|
||||
<p className="text-sm text-slate-600 text-center">
|
||||
Click "Proceed to Payment" to be redirected to Stripe's secure checkout page.
|
||||
</p>
|
||||
|
||||
<div className="flex justify-between gap-4">
|
||||
<Button type="button" onClick={handlePrev} className="w-1/2 bg-gray-300 hover:bg-gray-400 text-gray-800 text-lg py-3">
|
||||
Previous
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
onClick={handleBuy}
|
||||
className="w-1/2 bg-green-600 hover:bg-green-700 text-lg py-3"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? 'Processing...' : 'Proceed to Payment'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</>
|
||||
)
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
|
||||
{/* Navigation */}
|
||||
<Navigation />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto text-center space-y-8">
|
||||
<Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Direct Purchase</Badge>
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight">
|
||||
Become A <span className="text-blue-600">Member</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-600 leading-relaxed max-w-3xl mx-auto">
|
||||
Join OurWorld Coop's sovereign digital freezone for $20 USD per month.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Purchase Form */}
|
||||
<section className="pb-16 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<Card className="shadow-xl">
|
||||
{renderStepContent()}
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What Happens Next */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">What Happens Next?</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-white font-bold">1</span>
|
||||
</div>
|
||||
<CardTitle className="text-blue-600">Confirm Your Membership</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Complete your secure Stripe checkout to confirm your OurWorld Coop membership.
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-white font-bold">2</span>
|
||||
</div>
|
||||
<CardTitle className="text-green-600">Access Your Benefits</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Gain immediate access to member-exclusive content, tools, and community forums.
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="text-center">
|
||||
<CardHeader>
|
||||
<div className="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-white font-bold">3</span>
|
||||
</div>
|
||||
<CardTitle className="text-purple-600">Engage & Govern</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Participate in cooperative governance, shape the future, and contribute to the digital freezone.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
|
||||
<div className="max-w-6xl mx-auto text-center">
|
||||
<div className="flex items-center justify-center space-x-2 mb-4">
|
||||
<Globe className="h-6 w-6 text-blue-400" />
|
||||
<span className="text-xl font-bold">OurWorld Coop</span>
|
||||
</div>
|
||||
<p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
|
||||
<p className="text-sm text-slate-500 mt-4">© 2025 OurWorld Coop. A cooperative for digital freedom.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DirectBuy
|
||||
122
src/components/Blog.jsx
Normal file
122
src/components/Blog.jsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import matter from 'gray-matter';
|
||||
|
||||
function Blog() {
|
||||
const [posts, setPosts] = useState([]);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedTag, setSelectedTag] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchPosts() {
|
||||
try {
|
||||
const postFiles = import.meta.glob('../blogs/*.md', { query: '?raw', import: 'default', eager: true });
|
||||
const loadedPosts = [];
|
||||
for (const path in postFiles) {
|
||||
const content = postFiles[path];
|
||||
const { data } = matter(content);
|
||||
const slug = path.split('/').pop().replace('.md', '');
|
||||
loadedPosts.push({ slug, ...data });
|
||||
}
|
||||
loadedPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
|
||||
setPosts(loadedPosts);
|
||||
} catch (error) {
|
||||
console.error("Error fetching blog posts:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
fetchPosts();
|
||||
}, []);
|
||||
|
||||
const allTags = [...new Set(posts.flatMap(post => post.tags || []))];
|
||||
|
||||
const filteredPosts = posts
|
||||
.filter(post => {
|
||||
const title = post.title || '';
|
||||
const author = post.author || '';
|
||||
return title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
author.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
})
|
||||
.filter(post =>
|
||||
selectedTag ? (post.tags || []).includes(selectedTag) : true
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-12 max-w-5xl">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-5xl font-extrabold text-gray-900 leading-tight">OurWorld Blog</h1>
|
||||
<p className="mt-4 text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
Insights, stories, and updates from the OurWorld Cooperative.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-8 flex flex-col md:flex-row gap-4 items-center">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search articles..."
|
||||
className="flex-grow w-full md:w-auto px-4 py-2 border border-gray-300 rounded-full focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-shadow"
|
||||
value={searchTerm}
|
||||
onChange={e => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<div className="relative w-full md:w-auto">
|
||||
<select
|
||||
className="w-full appearance-none bg-white border border-gray-300 rounded-full px-4 py-2 pr-8 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-shadow"
|
||||
value={selectedTag}
|
||||
onChange={e => setSelectedTag(e.target.value)}
|
||||
>
|
||||
<option value="">All Topics</option>
|
||||
{allTags.map(tag => (
|
||||
<option key={tag} value={tag}>{tag}</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
||||
<svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{loading ? (
|
||||
<div className="text-center text-gray-500">Loading posts...</div>
|
||||
) : filteredPosts.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
|
||||
{filteredPosts.map(post => (
|
||||
<Link to={`/blog/${post.slug}`} key={post.slug} className="group block bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden transform hover:-translate-y-1">
|
||||
{post.cover_image && (
|
||||
<img src={post.cover_image} alt={post.title} className="w-full h-48 object-cover" />
|
||||
)}
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
{post.tags && post.tags.map(tag => (
|
||||
<span key={tag} className="bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
|
||||
{post.title}
|
||||
</h2>
|
||||
<p className="text-gray-500 text-sm mb-4">
|
||||
By {post.author} on {new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
{post.summary && post.summary.length > 200 ? `${post.summary.substring(0, 200)}...` : post.summary}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-gray-500 py-16">
|
||||
<h2 className="text-2xl font-semibold mb-2">No posts found</h2>
|
||||
<p>Try adjusting your search or filters.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Blog;
|
||||
136
src/components/BlogPost.jsx
Normal file
136
src/components/BlogPost.jsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
import matter from 'gray-matter';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
|
||||
function BlogPost() {
|
||||
const { slug } = useParams();
|
||||
const [postContent, setPostContent] = useState('');
|
||||
const [postData, setPostData] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchPost() {
|
||||
try {
|
||||
const postFiles = import.meta.glob('../blogs/*.md', { query: '?raw', import: 'default', eager: true });
|
||||
const postPath = `../blogs/${slug}.md`;
|
||||
|
||||
if (postFiles[postPath]) {
|
||||
const content = postFiles[postPath];
|
||||
const { data, content: postContent } = matter(content);
|
||||
setPostData(data);
|
||||
setPostContent(postContent);
|
||||
} else {
|
||||
throw new Error("Post not found");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch blog post:", error);
|
||||
setPostContent("## Error loading post.\n\nCould not find the requested blog post.");
|
||||
setPostData({ title: "Error", author: "System", date: new Date().toISOString().split('T')[0] });
|
||||
}
|
||||
}
|
||||
fetchPost();
|
||||
}, [slug]);
|
||||
|
||||
return (
|
||||
<div className="bg-gray-50 py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<article className="max-w-5xl mx-auto bg-white rounded-lg shadow-xl p-8 md:p-12">
|
||||
<header className="text-center mb-8">
|
||||
<div className="flex justify-center items-center gap-2 mb-4">
|
||||
{postData.tags && postData.tags.map(tag => (
|
||||
<span key={tag} className="bg-blue-100 text-blue-800 text-sm font-medium px-4 py-1 rounded-full">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-extrabold text-gray-900 leading-tight">
|
||||
{postData.title}
|
||||
</h1>
|
||||
<p className="mt-4 text-lg text-gray-500">
|
||||
By {postData.author} on {postData.date ? new Date(postData.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) : 'N/A'}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{postData.cover_image && (
|
||||
<img
|
||||
src={postData.cover_image}
|
||||
alt={postData.title}
|
||||
className="w-full h-auto max-h-96 object-cover rounded-lg shadow-lg mb-8"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="prose prose-lg max-w-none mx-auto text-gray-800 prose-headings:text-gray-900 prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl prose-h4:text-lg prose-p:text-gray-700 prose-strong:text-gray-900 prose-img:rounded-lg prose-img:shadow-md">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
rehypePlugins={[rehypeRaw]}
|
||||
components={{
|
||||
img: ({node, ...props}) => (
|
||||
<img
|
||||
{...props}
|
||||
src={`/src/blogs/${props.src}`}
|
||||
className="w-full h-auto max-w-full rounded-lg shadow-md my-6"
|
||||
loading="lazy"
|
||||
/>
|
||||
),
|
||||
h1: ({node, ...props}) => (
|
||||
<h1 className="text-3xl font-bold text-gray-900 mt-8 mb-4" {...props} />
|
||||
),
|
||||
h2: ({node, ...props}) => (
|
||||
<h2 className="text-2xl font-bold text-gray-900 mt-6 mb-3" {...props} />
|
||||
),
|
||||
h3: ({node, ...props}) => (
|
||||
<h3 className="text-xl font-semibold text-gray-900 mt-5 mb-2" {...props} />
|
||||
),
|
||||
h4: ({node, ...props}) => (
|
||||
<h4 className="text-lg font-semibold text-gray-900 mt-4 mb-2" {...props} />
|
||||
),
|
||||
p: ({node, ...props}) => (
|
||||
<p className="text-gray-700 leading-relaxed mb-4" {...props} />
|
||||
),
|
||||
strong: ({node, ...props}) => (
|
||||
<strong className="font-semibold text-gray-900" {...props} />
|
||||
),
|
||||
em: ({node, ...props}) => (
|
||||
<em className="italic text-gray-700" {...props} />
|
||||
),
|
||||
ul: ({node, ...props}) => (
|
||||
<ul className="list-disc list-inside mb-4 text-gray-700" {...props} />
|
||||
),
|
||||
ol: ({node, ...props}) => (
|
||||
<ol className="list-decimal list-inside mb-4 text-gray-700" {...props} />
|
||||
),
|
||||
li: ({node, ...props}) => (
|
||||
<li className="mb-1" {...props} />
|
||||
),
|
||||
blockquote: ({node, ...props}) => (
|
||||
<blockquote className="border-l-4 border-blue-500 pl-4 italic text-gray-600 my-4" {...props} />
|
||||
),
|
||||
code: ({node, inline, ...props}) =>
|
||||
inline ? (
|
||||
<code className="bg-gray-100 text-gray-800 px-1 py-0.5 rounded text-sm" {...props} />
|
||||
) : (
|
||||
<code className="block bg-gray-100 text-gray-800 p-4 rounded-lg text-sm overflow-x-auto" {...props} />
|
||||
),
|
||||
pre: ({node, ...props}) => (
|
||||
<pre className="bg-gray-100 p-4 rounded-lg overflow-x-auto my-4" {...props} />
|
||||
)
|
||||
}}
|
||||
>
|
||||
{postContent}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
|
||||
<footer className="mt-12 text-center">
|
||||
<Link to="/blog" className="text-blue-600 hover:text-blue-800 font-semibold transition-colors">
|
||||
← Back to all posts
|
||||
</Link>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogPost;
|
||||
463
src/components/Home.jsx
Normal file
463
src/components/Home.jsx
Normal file
@@ -0,0 +1,463 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Button } from './ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card'
|
||||
import { Badge } from './ui/badge'
|
||||
import { Globe, Zap, Shield, Users, DollarSign, Cpu, Database, Network, CheckCircle, Home, TrendingUp, Brain } from 'lucide-react'
|
||||
import Navigation from './Navigation'
|
||||
|
||||
// Import images
|
||||
import heroBanner from '../assets/images/hero_banner.png' // This image might need to be replaced with a relevant one for ThreeFold
|
||||
|
||||
function Homepage() {
|
||||
const [isVisible, setIsVisible] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setIsVisible(true)
|
||||
}, [])
|
||||
|
||||
const scrollToSection = (sectionId) => {
|
||||
document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
|
||||
{/* Navigation */}
|
||||
<Navigation />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className={`pt-24 pb-16 px-4 sm:px-6 lg:px-8 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-4">
|
||||
<Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">The Future of Infrastructure</Badge>
|
||||
<h1 className="text-2xl md:text-4xl font-bold text-slate-900 leading-tight">
|
||||
Transform Your Building Into a <span className="text-blue-600">Digital Powerhouse</span>. The Future of Infrastructure is Decentralized.
|
||||
</h1>
|
||||
<p className="text-xl text-slate-600 leading-relaxed">
|
||||
ThreeFold Tier-S & Tier-H Datacenters turn homes, offices, and buildings into sovereign digital infrastructure. Generate passive revenue while providing resilient, local cloud and AI services that keep data where it belongs - under your control.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Button asChild size="lg" className="bg-blue-600 hover:bg-blue-700 text-lg px- py-3">
|
||||
<Link to="/register">Register Interest</Link>
|
||||
</Button>
|
||||
<Button onClick={() => scrollToSection('products')} variant="outline" size="lg" className="text-lg px-8 py-3">
|
||||
Learn More About Products
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-slate-500">Join the revolution in decentralized digital infrastructure.</p>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<img src={heroBanner} alt="ThreeFold Datacenter Illustration" className="w-full h-auto rounded-2xl shadow-2xl" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-blue-600/20 to-transparent rounded-2xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What Are Tier-S and Tier-H? */}
|
||||
<section id="products" className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">What Are Tier-S and Tier-H Datacenters?</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
ThreeFold introduces a new class of decentralized digital infrastructure: Tier-S for industrial scale and Tier-H for residential/office scale.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
|
||||
<CardHeader>
|
||||
<Cpu className="w-16 h-16 mx-auto mb-4 text-blue-600" />
|
||||
<CardTitle className="text-blue-600">Tier-S Datacenters</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="mb-2">Modular, industrial-grade containers that handle over 1 million transactions per second and support 100,000+ users per unit. Perfect for industrial-scale AI and cloud deployment.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-green-200">
|
||||
<CardHeader>
|
||||
<Home className="w-16 h-16 mx-auto mb-4 text-green-600" />
|
||||
<CardTitle className="text-green-600">Tier-H Datacenters</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="mb-2">Plug-and-play nodes for homes, offices, and mixed-use spaces. Provide full compute, storage, and networking with ultra energy-efficiency (less than 10W per node) and zero maintenance.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* From Real Estate to Digital Infrastructure */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-green-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">From Real Estate to Digital Infrastructure</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Just Like Solar Panels Transform Buildings Into Power Generators, ThreeFold Nodes Transform Them Into Digital Utilities.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" />
|
||||
<CardTitle className="text-blue-600">Compute, Storage, Networking</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Your building can produce essential digital resources.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<Brain className="w-12 h-12 mx-auto mb-4 text-green-600" />
|
||||
<CardTitle className="text-green-600">AI Inference Power</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Host AI workloads and contribute to decentralized AI.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<DollarSign className="w-12 h-12 mx-auto mb-4 text-purple-600" />
|
||||
<CardTitle className="text-purple-600">Recurring Digital Revenue</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Monetize idle capacity and generate passive income.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<p className="text-center text-xl text-slate-600 mt-12">
|
||||
Compute is now one of the world's most valuable resources. Sovereign infrastructure is the new standard.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Real Estate Developers Should Join */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Why Real Estate Developers Should Join</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Transform your properties into digital assets and unlock new revenue streams.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-blue-600">
|
||||
<DollarSign className="h-5 w-5" />
|
||||
Passive Digital Revenue
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Monetize idle compute, bandwidth, and storage capacity.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-green-600">
|
||||
<TrendingUp className="h-5 w-5" />
|
||||
Higher Property Value
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Market properties as cloud-enabled and future-proof.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-purple-600">
|
||||
<Zap className="h-5 w-5" />
|
||||
Green & Resilient
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
10x less energy vs traditional datacenters, resilient to outages.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-orange-600">
|
||||
<CheckCircle className="h-5 w-5" />
|
||||
Turnkey Deployment
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
No IT expertise required for installation and operation.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-teal-600">
|
||||
<Shield className="h-5 w-5" />
|
||||
Sovereign Cloud
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Data stays local and private, under your control.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-indigo-600">
|
||||
<Globe className="h-5 w-5" />
|
||||
Future-Proof
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Supports AI, Web3, digital twins, and modern applications.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Technical Advantages */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Built on Revolutionary Technology</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Key differentiators that make ThreeFold superior to traditional infrastructure.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
|
||||
<CardHeader>
|
||||
<Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" />
|
||||
<CardTitle className="text-blue-600">Zero-OS</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Stateless, self-healing operating system for autonomous compute.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-green-200">
|
||||
<CardHeader>
|
||||
<Database className="w-12 h-12 mx-auto mb-4 text-green-600" />
|
||||
<CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Unbreakable data protection with 10x efficiency through mathematical dispersion.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
|
||||
<CardHeader>
|
||||
<Network className="w-12 h-12 mx-auto mb-4 text-purple-600" />
|
||||
<CardTitle className="text-purple-600">Mycelium Network</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Mesh networking that routes around failures, ensuring resilient connectivity.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-orange-200">
|
||||
<CardHeader>
|
||||
<Shield className="w-12 h-12 mx-auto mb-4 text-orange-600" />
|
||||
<CardTitle className="text-orange-600">Smart Contract for IT</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Autonomous, cryptographically secured deployments for IT resources.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-teal-200">
|
||||
<CardHeader>
|
||||
<Brain className="w-12 h-12 mx-auto mb-4 text-teal-600" />
|
||||
<CardTitle className="text-teal-600">Geo-Aware AI</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Private AI agents that respect boundaries and data sovereignty.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Real Cost Comparison */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Dramatic Cost Savings</h2>
|
||||
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
|
||||
Experience significant cost advantages compared to traditional cloud providers.
|
||||
</p>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full bg-white rounded-lg shadow-md">
|
||||
<thead>
|
||||
<tr className="bg-blue-600 text-white">
|
||||
<th className="py-3 px-4 text-left">Service</th>
|
||||
<th className="py-3 px-4 text-left">ThreeFold</th>
|
||||
<th className="py-3 px-4 text-left">Other Providers</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">Storage (1TB + 100GB Transfer)</td>
|
||||
<td className="py-3 px-4 font-semibold">Less than $5/month</td>
|
||||
<td className="py-3 px-4">$12–$160/month</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4">Compute (2 vCPU, 4GB RAM)</td>
|
||||
<td className="py-3 px-4 font-semibold">Less than $12/month</td>
|
||||
<td className="py-3 px-4">$20–$100/month</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p className="text-center text-lg text-slate-600 mt-8">
|
||||
Up to 10x more energy efficient than traditional datacenters.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Who It's For */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Perfect For</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Clear target markets and use cases for ThreeFold's solutions.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-blue-600">
|
||||
<Shield className="h-5 w-5" />
|
||||
Governments
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Building sovereign AI and cloud infrastructure.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-green-600">
|
||||
<Network className="h-5 w-5" />
|
||||
Telecoms and ISPs
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Deploying local compute grids and edge solutions.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-purple-600">
|
||||
<Users className="h-5 w-5" />
|
||||
Developers and Startups
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Seeking cloud independence and decentralized hosting.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-orange-600">
|
||||
<Brain className="h-5 w-5" />
|
||||
AI and Web3 Companies
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Hosting inference or full-stack decentralized applications.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-teal-600">
|
||||
<Globe className="h-5 w-5" />
|
||||
Communities
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Seeking plug-and-play digital resilience and local infrastructure.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Proven at Scale */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Proven at Scale</h2>
|
||||
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
|
||||
ThreeFold's technology is already deployed globally and proven in production.
|
||||
</p>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-blue-600">Live in over 50 countries</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Our decentralized grid spans across the globe.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-green-600">60,000+ CPU cores active</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Massive computational power available on the grid.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-purple-600">Over 1 million contracts processed on-chain</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Secure and transparent deployments managed by smart contracts.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-orange-600">Proven technology stack in production for years</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Reliable and robust infrastructure for your digital needs.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<p className="text-center text-lg text-slate-600 mt-8">
|
||||
View live statistics: <a href="https://stats.grid.tf" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://stats.grid.tf</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Call to Action */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-600 to-green-600 text-white">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<h2 className="text-3xl md:text-4xl font-bold">Ready to Transform Your Infrastructure?</h2>
|
||||
<p className="text-xl opacity-90 leading-relaxed">
|
||||
The future of digital infrastructure starts with your building.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button asChild size="lg" className="bg-white text-blue-600 hover:bg-slate-100 text-lg px-8 py-3">
|
||||
<Link to="/register">For Real Estate Developers: Deploy Tier-H nodes</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="lg" className="border-white text-white hover:bg-white hover:text-blue-600 text-lg px-8 py-3">
|
||||
<Link to="/products">For Enterprises: Scale with Tier-S datacenters</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm opacity-75">Join the most resilient, inclusive, and intelligent internet.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
|
||||
<div className="max-w-6xl mx-auto text-center">
|
||||
<div className="flex items-center justify-center space-x-2 mb-4">
|
||||
<Globe className="h-6 w-6 text-blue-400" />
|
||||
<span className="text-xl font-bold">ThreeFold Cloud</span>
|
||||
</div>
|
||||
<p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
|
||||
<p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Cloud. A new era of decentralized infrastructure.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Homepage
|
||||
44
src/components/Navigation.jsx
Normal file
44
src/components/Navigation.jsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { Button } from '@/components/ui/button.jsx'
|
||||
import { Globe } from 'lucide-react'
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
import navigationData from '../config/navigation.json'
|
||||
|
||||
function Navigation() {
|
||||
const location = useLocation()
|
||||
|
||||
const isActive = (path) => {
|
||||
return location.pathname === path
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className="fixed top-0 w-full bg-white/90 backdrop-blur-md border-b border-slate-200 z-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<Link to="/" className="flex items-center space-x-2">
|
||||
<Globe className="h-8 w-8 text-blue-600" />
|
||||
<span className="text-xl font-bold text-slate-900">ThreeFold Cloud</span>
|
||||
</Link>
|
||||
<div className="hidden md:flex items-center space-x-8">
|
||||
{navigationData
|
||||
.filter(item => item.show !== false)
|
||||
.map((item) => (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className={`transition-colors ${isActive(item.path) ? 'text-blue-600 font-medium' : 'text-slate-600 hover:text-blue-600'}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
<Button asChild className="bg-blue-600 hover:bg-blue-700">
|
||||
<Link to="/register">Join Now</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navigation
|
||||
|
||||
432
src/components/ProductsPage.jsx
Normal file
432
src/components/ProductsPage.jsx
Normal file
@@ -0,0 +1,432 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Button } from './ui/button'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
|
||||
import { Badge } from './ui/badge'
|
||||
import { Cpu, Home, Shield, Network, DollarSign, CheckCircle, Users, Zap, TrendingUp, Layers, Scale, Globe } from 'lucide-react'
|
||||
import Navigation from './Navigation'
|
||||
|
||||
function ProductsPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
|
||||
{/* Navigation */}
|
||||
<Navigation />
|
||||
|
||||
{/* Product Overview Hero */}
|
||||
<section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-5xl mx-auto text-center space-y-8">
|
||||
<Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Our Solutions</Badge>
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight">
|
||||
Two Solutions, <span className="text-blue-600">Infinite Possibilities</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto leading-relaxed">
|
||||
ThreeFold's datacenter solutions scale from residential deployments to industrial infrastructure, all powered by the same revolutionary technology stack.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Tier-H Datacenters: Residential & Office Scale */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Tier-H: Plug-and-Play Digital Infrastructure</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Perfect for homes, offices, and mixed-use buildings, offering edge computing and local AI processing.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8 items-center">
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-blue-600">Perfect For:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Homes, offices, and mixed-use buildings</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Edge computing and local AI processing</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Community networks and local services</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Development and testing environments</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-blue-600">Technical Specifications:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Full compute, storage, and networking capabilities</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-touch deployment and maintenance</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Supports AI workloads, Web2/Web3 applications</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Compatible with Kubernetes and container platforms</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 text-center">
|
||||
<h3 className="text-2xl font-bold text-blue-600 mb-6">Key Benefits:</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-blue-600">Plug-and-play installation</CardTitle></CardHeader>
|
||||
<CardContent>Easy setup, no technical expertise needed.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-green-600">Zero maintenance required</CardTitle></CardHeader>
|
||||
<CardContent>Autonomous operation, minimal human intervention.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-purple-600">Generate passive income</CardTitle></CardHeader>
|
||||
<CardContent>Monetize unused compute capacity.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-orange-600">Local data sovereignty</CardTitle></CardHeader>
|
||||
<CardContent>Data stays local and private, under your control.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-teal-600">Resilient to internet outages</CardTitle></CardHeader>
|
||||
<CardContent>Ensures continuity of local services.</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Tier-S Datacenters: Industrial Scale */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Tier-S: Industrial-Grade Modular Datacenters</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Comprehensive overview of the enterprise-grade solution for large-scale deployments.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8 items-center">
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-purple-600">Perfect For:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Government digital infrastructure</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Telecom edge deployment</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Enterprise private clouds</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> AI training and inference at scale</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Regional cloud service providers</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-purple-600">Technical Specifications:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Modular container-based design</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Handle 1+ million transactions per second</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Support 100,000+ concurrent users per unit</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Deployed in under six months</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Cyberpandemic and disaster-resilient</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 text-center">
|
||||
<h3 className="text-2xl font-bold text-purple-600 mb-6">Key Benefits:</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-purple-600">Rapid deployment</CardTitle></CardHeader>
|
||||
<CardContent>Faster setup compared to traditional datacenters.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-blue-600">Complete sovereignty</CardTitle></CardHeader>
|
||||
<CardContent>Full control over data and operations.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-green-600">Scales horizontally</CardTitle></CardHeader>
|
||||
<CardContent>Unlimited scalability without bottlenecks.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-orange-600">Built-in redundancy</CardTitle></CardHeader>
|
||||
<CardContent>Self-healing and resilient infrastructure.</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Technology Stack Comparison */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Shared Technology Foundation</h2>
|
||||
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
|
||||
Both Tier-H and Tier-S solutions are built on the same revolutionary underlying technology stack.
|
||||
</p>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full bg-white rounded-lg shadow-md">
|
||||
<thead>
|
||||
<tr className="bg-blue-600 text-white">
|
||||
<th className="py-3 px-4 text-left">Feature</th>
|
||||
<th className="py-3 px-4 text-left">Tier-H</th>
|
||||
<th className="py-3 px-4 text-left">Tier-S</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">Zero-OS</td>
|
||||
<td className="py-3 px-4">✓</td>
|
||||
<td className="py-3 px-4">✓</td>
|
||||
</tr>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">Quantum-Safe Storage</td>
|
||||
<td className="py-3 px-4">✓</td>
|
||||
<td className="py-3 px-4">✓</td>
|
||||
</tr>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">Mycelium Network</td>
|
||||
<td className="py-3 px-4">✓</td>
|
||||
<td className="py-3 px-4">✓</td>
|
||||
</tr>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">Smart Contract for IT</td>
|
||||
<td className="py-3 px-4">✓</td>
|
||||
<td className="py-3 px-4">✓</td>
|
||||
</tr>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">AI/ML Support</td>
|
||||
<td className="py-3 px-4">✓</td>
|
||||
<td className="py-3 px-4">✓</td>
|
||||
</tr>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">Kubernetes Compatible</td>
|
||||
<td className="py-3 px-4">✓</td>
|
||||
<td className="py-3 px-4">✓</td>
|
||||
</tr>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">Energy Efficiency</td>
|
||||
<td className="py-3 px-4">Ultra-High</td>
|
||||
<td className="py-3 px-4">High</td>
|
||||
</tr>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">Deployment Time</td>
|
||||
<td className="py-3 px-4">Minutes</td>
|
||||
<td className="py-3 px-4">Months</td>
|
||||
</tr>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">Maintenance</td>
|
||||
<td className="py-3 px-4">Zero-touch</td>
|
||||
<td className="py-3 px-4">Minimal</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4">Scale</td>
|
||||
<td className="py-3 px-4">Local/Edge</td>
|
||||
<td className="py-3 px-4">Regional/Global</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Use Case Matrix */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Choose Your Deployment Strategy</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Clear mapping of products to specific use cases.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-green-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-green-600">Tier-H Ideal For:</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-slate-700">
|
||||
<li>Personal AI assistants and agents</li>
|
||||
<li>Local file storage and backup</li>
|
||||
<li>Home automation and IoT</li>
|
||||
<li>Small business applications</li>
|
||||
<li>Development environments</li>
|
||||
<li>Community mesh networks</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-blue-600">Tier-S Ideal For:</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-slate-700">
|
||||
<li>National digital infrastructure</li>
|
||||
<li>Regional cloud services</li>
|
||||
<li>Large-scale AI training</li>
|
||||
<li>Enterprise private clouds</li>
|
||||
<li>Telecom edge computing</li>
|
||||
<li>Disaster recovery centers</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Deployment Models */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Flexible Deployment Options</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Different ways to implement ThreeFold's solutions.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-blue-600">Single Node Deployment</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Start with one Tier-H node. Perfect for testing and small applications. Scales by adding more nodes.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-green-600">Hybrid Deployment</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Combine Tier-H and Tier-S. Edge processing with centralized coordination. Optimal for distributed organizations.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-purple-600">Regional Grid</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Multiple Tier-S datacenters. Geo-distributed for sovereignty. Enterprise-grade redundancy.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Economic Model */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Investment and Returns</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Revenue and cost structure for each product.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-blue-600">Tier-H Economics</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-slate-700">
|
||||
<li>Low initial investment</li>
|
||||
<li>Immediate revenue from spare capacity</li>
|
||||
<li>ROI typically within 12-24 months</li>
|
||||
<li>Minimal operational costs</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-purple-600">Tier-S Economics</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-slate-700">
|
||||
<li>Higher initial investment</li>
|
||||
<li>Enterprise-grade revenue potential</li>
|
||||
<li>3x higher ROI compared to traditional datacenters</li>
|
||||
<li>Significantly lower operational costs</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Support and Services */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Complete Support Ecosystem</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
What comes with each product offering.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-blue-600">Included with Every Deployment</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-slate-700">
|
||||
<li>Technical documentation and training</li>
|
||||
<li>Community support forums</li>
|
||||
<li>Regular software updates</li>
|
||||
<li>Monitoring and analytics tools</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-green-600">Enterprise Services (Tier-S)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-slate-700">
|
||||
<li>Dedicated technical support</li>
|
||||
<li>Custom integration services</li>
|
||||
<li>SLA guarantees</li>
|
||||
<li>Professional consulting</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Getting Started */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Ready to Deploy?</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Clear next steps for each product.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-green-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-green-600">Start with Tier-H:</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-slate-700">
|
||||
<li>Order your first node</li>
|
||||
<li>Plug in and start earning</li>
|
||||
<li>Scale as you grow</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-blue-600">Scale with Tier-S:</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-slate-700">
|
||||
<li>Schedule a consultation</li>
|
||||
<li>Custom deployment planning</li>
|
||||
<li>Professional installation and setup</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<p className="text-center text-lg text-slate-600 mt-8">
|
||||
Both Options: Join our partner network, access technical resources, connect with the community.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
|
||||
<div className="max-w-6xl mx-auto text-center">
|
||||
<div className="flex items-center justify-center space-x-2 mb-4">
|
||||
<Globe className="h-6 w-6 text-blue-400" />
|
||||
<span className="text-xl font-bold">ThreeFold Cloud</span>
|
||||
</div>
|
||||
<p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
|
||||
<p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Cloud. A new era of decentralized infrastructure.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductsPage
|
||||
662
src/components/RegisterPage.jsx
Normal file
662
src/components/RegisterPage.jsx
Normal file
@@ -0,0 +1,662 @@
|
||||
import { useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Button } from './ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card'
|
||||
import { Badge } from './ui/badge'
|
||||
import { Input } from './ui/input'
|
||||
import { Label } from './ui/label'
|
||||
import { Textarea } from './ui/textarea'
|
||||
import { Checkbox } from './ui/checkbox'
|
||||
import { Building2, Globe, Briefcase, Users, Home, DollarSign, CheckCircle, AlertCircle, ArrowRight, Zap, TrendingUp, Target } from 'lucide-react'
|
||||
import Navigation from './Navigation'
|
||||
|
||||
function RegisterPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
interestCategory: '',
|
||||
company: '',
|
||||
position: '',
|
||||
investmentRange: '',
|
||||
experience: '',
|
||||
motivation: '',
|
||||
accredited: false,
|
||||
newsletter: false,
|
||||
terms: false,
|
||||
propertyType: '',
|
||||
propertySize: '',
|
||||
location: '',
|
||||
connectivity: '',
|
||||
investmentTimeline: '',
|
||||
revenueExpectations: '',
|
||||
jurisdiction: '',
|
||||
currentInfrastructure: '',
|
||||
challenges: '',
|
||||
budgetParameters: '',
|
||||
specificUseCases: '',
|
||||
migrationTimeline: '',
|
||||
priorities: '',
|
||||
networkCoverage: '',
|
||||
customerBase: '',
|
||||
technicalIntegration: '',
|
||||
businessModelPreferences: '',
|
||||
strategicObjectives: '',
|
||||
synergies: '',
|
||||
commitmentLevel: '',
|
||||
partnershipStructure: '',
|
||||
technicalComfortLevel: '',
|
||||
goals: '',
|
||||
communityInvolvementInterest: ''
|
||||
})
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [submitStatus, setSubmitStatus] = useState(null) // 'success', 'error', or null
|
||||
|
||||
const handleInputChange = (field, value) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[field]: value
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
setSubmitStatus(null)
|
||||
|
||||
// Basic validation for terms
|
||||
if (!formData.terms) {
|
||||
setSubmitStatus('error')
|
||||
console.error('Terms not agreed.')
|
||||
setIsSubmitting(false)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// Replace with your actual API endpoint
|
||||
const response = await fetch('https://api.threefold.io/register-interest', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
...formData,
|
||||
timestamp: new Date().toISOString(),
|
||||
source: 'threefold_register_page'
|
||||
})
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
const result = await response.json()
|
||||
console.log('Interest registration successful:', result)
|
||||
|
||||
setSubmitStatus('success')
|
||||
|
||||
// Reset form after successful submission
|
||||
setFormData({
|
||||
name: '', email: '', interestCategory: '', company: '', position: '',
|
||||
investmentRange: '', experience: '', motivation: '', accredited: false,
|
||||
newsletter: false, terms: false, propertyType: '', propertySize: '',
|
||||
location: '', connectivity: '', investmentTimeline: '', revenueExpectations: '',
|
||||
jurisdiction: '', currentInfrastructure: '', challenges: '', budgetParameters: '',
|
||||
specificUseCases: '', migrationTimeline: '', priorities: '', networkCoverage: '',
|
||||
customerBase: '', technicalIntegration: '', businessModelPreferences: '',
|
||||
strategicObjectives: '', synergies: '', commitmentLevel: '', partnershipStructure: '',
|
||||
technicalComfortLevel: '', goals: '', communityInvolvementInterest: ''
|
||||
})
|
||||
|
||||
} catch (error) {
|
||||
console.error('Registration error:', error)
|
||||
setSubmitStatus('error')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const renderFormFields = () => {
|
||||
switch (formData.interestCategory) {
|
||||
case 'realEstateDeveloper':
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="propertyType">Property Type and Size</Label>
|
||||
<Input id="propertyType" placeholder="e.g., Residential, Commercial, Industrial; 1000 sq ft" value={formData.propertyType} onChange={(e) => handleInputChange('propertyType', e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="location">Location and Connectivity</Label>
|
||||
<Input id="location" placeholder="City, Country; Fiber/Broadband availability" value={formData.location} onChange={(e) => handleInputChange('location', e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="investmentTimeline">Investment Timeline</Label>
|
||||
<Input id="investmentTimeline" placeholder="e.g., 3-6 months, 1 year+" value={formData.investmentTimeline} onChange={(e) => handleInputChange('investmentTimeline', e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="revenueExpectations">Revenue Expectations</Label>
|
||||
<Input id="revenueExpectations" placeholder="e.g., Passive income, property value increase" value={formData.revenueExpectations} onChange={(e) => handleInputChange('revenueExpectations', e.target.value)} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
case 'government':
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="jurisdiction">Jurisdiction and Regulatory Requirements</Label>
|
||||
<Input id="jurisdiction" placeholder="e.g., National, State, Local; Data sovereignty laws" value={formData.jurisdiction} onChange={(e) => handleInputChange('jurisdiction', e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="currentInfrastructure">Current Infrastructure and Challenges</Label>
|
||||
<Textarea id="currentInfrastructure" placeholder="Describe existing systems and pain points" value={formData.currentInfrastructure} onChange={(e) => handleInputChange('currentInfrastructure', e.target.value)} rows={3} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="budgetParameters">Timeline and Budget Parameters</Label>
|
||||
<Input id="budgetParameters" placeholder="e.g., Q4 2025, $X budget" value={formData.budgetParameters} onChange={(e) => handleInputChange('budgetParameters', e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="specificUseCases">Specific Use Cases and Requirements</Label>
|
||||
<Textarea id="specificUseCases" placeholder="e.g., Citizen services, national data storage" value={formData.specificUseCases} onChange={(e) => handleInputChange('specificUseCases', e.target.value)} rows={3} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
case 'enterprise':
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="currentInfrastructure">Current Infrastructure and Pain Points</Label>
|
||||
<Textarea id="currentInfrastructure" placeholder="Describe your current cloud setup and challenges" value={formData.currentInfrastructure} onChange={(e) => handleInputChange('currentInfrastructure', e.target.value)} rows={3} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="specificUseCases">Technical Requirements and Constraints</Label>
|
||||
<Textarea id="specificUseCases" placeholder="e.g., Specific workloads, compliance needs" value={formData.specificUseCases} onChange={(e) => handleInputChange('specificUseCases', e.target.value)} rows={3} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="complianceSecurity">Compliance and Security Needs</Label>
|
||||
<Input id="complianceSecurity" placeholder="e.g., ISO 27001, HIPAA, GDPR" value={formData.complianceSecurity} onChange={(e) => handleInputChange('complianceSecurity', e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="migrationTimeline">Migration Timeline and Priorities</Label>
|
||||
<Input id="migrationTimeline" placeholder="e.g., Phased migration over 12 months" value={formData.migrationTimeline} onChange={(e) => handleInputChange('migrationTimeline', e.target.value)} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
case 'telecom':
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="networkCoverage">Network Coverage and Infrastructure</Label>
|
||||
<Textarea id="networkCoverage" placeholder="Describe your existing network assets" value={formData.networkCoverage} onChange={(e) => handleInputChange('networkCoverage', e.target.value)} rows={3} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="customerBase">Customer Base and Requirements</Label>
|
||||
<Textarea id="customerBase" placeholder="e.g., Residential, Business; Edge computing needs" value={formData.customerBase} onChange={(e) => handleInputChange('customerBase', e.target.value)} rows={3} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="technicalIntegration">Technical Integration Capabilities</Label>
|
||||
<Input id="technicalIntegration" placeholder="e.g., API, existing OSS/BSS" value={formData.technicalIntegration} onChange={(e) => handleInputChange('technicalIntegration', e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="businessModelPreferences">Business Model Preferences</Label>
|
||||
<Input id="businessModelPreferences" placeholder="e.g., Revenue sharing, direct purchase" value={formData.businessModelPreferences} onChange={(e) => handleInputChange('businessModelPreferences', e.target.value)} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
case 'investor':
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="investmentRange">Investment Range of Interest</Label>
|
||||
<select
|
||||
id="investmentRange"
|
||||
className="w-full p-3 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
value={formData.investmentRange}
|
||||
onChange={(e) => handleInputChange('investmentRange', e.target.value)}
|
||||
>
|
||||
<option value="">Select investment range</option>
|
||||
<option value="$10K-$50K">$10,000 - $50,000</option>
|
||||
<option value="$50K-$100K">$50,000 - $100,000</option>
|
||||
<option value="$100K-$500K">$100,000 - $500,000</option>
|
||||
<option value="$500K-$1M">$500,000 - $1,000,000</option>
|
||||
<option value="$1M+">$1,000,000+</option>
|
||||
<option value="Institutional">Institutional Investment</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="strategicObjectives">Strategic Objectives and Synergies</Label>
|
||||
<Textarea id="strategicObjectives" placeholder="How does this align with your strategic goals?" value={formData.strategicObjectives} onChange={(e) => handleInputChange('strategicObjectives', e.target.value)} rows={3} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="commitmentLevel">Timeline and Commitment Level</Label>
|
||||
<Input id="commitmentLevel" placeholder="e.g., Immediate, 6-12 months" value={formData.commitmentLevel} onChange={(e) => handleInputChange('commitmentLevel', e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="partnershipStructure">Preferred Partnership Structure</Label>
|
||||
<Input id="partnershipStructure" placeholder="e.g., Equity, Joint Venture, Strategic Alliance" value={formData.partnershipStructure} onChange={(e) => handleInputChange('partnershipStructure', e.target.value)} />
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="accredited"
|
||||
checked={formData.accredited}
|
||||
onCheckedChange={(checked) => handleInputChange('accredited', checked)}
|
||||
/>
|
||||
<Label htmlFor="accredited" className="text-sm">
|
||||
I am an accredited investor (or will provide verification if required)
|
||||
</Label>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
case 'individual':
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="location">Location and Connectivity</Label>
|
||||
<Input id="location" placeholder="City, Country; Internet speed" value={formData.location} onChange={(e) => handleInputChange('location', e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="technicalComfortLevel">Technical Comfort Level</Label>
|
||||
<select
|
||||
id="technicalComfortLevel"
|
||||
className="w-full p-3 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
value={formData.technicalComfortLevel}
|
||||
onChange={(e) => handleInputChange('technicalComfortLevel', e.target.value)}
|
||||
>
|
||||
<option value="">Select comfort level</option>
|
||||
<option value="beginner">Beginner (Plug-and-play)</option>
|
||||
<option value="intermediate">Intermediate (Some technical knowledge)</option>
|
||||
<option value="advanced">Advanced (Developer/SysAdmin)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="goals">Goals and Expectations</Label>
|
||||
<Textarea id="goals" placeholder="What do you hope to achieve by joining?" value={formData.goals} onChange={(e) => handleInputChange('goals', e.target.value)} rows={3} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="communityInvolvementInterest">Community Involvement Interest</Label>
|
||||
<Textarea id="communityInvolvementInterest" placeholder="Are you interested in participating in community governance or events?" value={formData.communityInvolvementInterest} onChange={(e) => handleInputChange('communityInvolvementInterest', e.target.value)} rows={3} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
|
||||
{/* Navigation */}
|
||||
<Navigation />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto text-center space-y-8">
|
||||
<Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Join the Revolution</Badge>
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight">
|
||||
Ready to Transform Your <span className="text-blue-600">Infrastructure?</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-600 leading-relaxed max-w-3xl mx-auto">
|
||||
Join the growing network of forward-thinking organizations building the future of decentralized digital infrastructure. From single nodes to regional grids, we'll help you deploy sovereign, profitable, and resilient datacenter solutions.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Choose Your Path */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">How Do You Want to Get Involved?</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<Card
|
||||
className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'realEstateDeveloper' ? 'border-blue-600 ring-2 ring-blue-600' : ''}`}
|
||||
onClick={() => handleInputChange('interestCategory', 'realEstateDeveloper')}
|
||||
>
|
||||
<CardHeader>
|
||||
<Building2 className="w-16 h-16 mx-auto mb-4 text-blue-600" />
|
||||
<CardTitle className="text-blue-600">Real Estate Developer</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Transform your properties into digital utilities.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card
|
||||
className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'government' ? 'border-green-600 ring-2 ring-green-600' : ''}`}
|
||||
onClick={() => handleInputChange('interestCategory', 'government')}
|
||||
>
|
||||
<CardHeader>
|
||||
<Shield className="w-16 h-16 mx-auto mb-4 text-green-600" />
|
||||
<CardTitle className="text-green-600">Government/Public Sector</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Build sovereign digital infrastructure.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card
|
||||
className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'enterprise' ? 'border-purple-600 ring-2 ring-purple-600' : ''}`}
|
||||
onClick={() => handleInputChange('interestCategory', 'enterprise')}
|
||||
>
|
||||
<CardHeader>
|
||||
<Briefcase className="w-16 h-16 mx-auto mb-4 text-purple-600" />
|
||||
<CardTitle className="text-purple-600">Enterprise Customer</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Deploy private, secure cloud infrastructure.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card
|
||||
className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'telecom' ? 'border-orange-600 ring-2 ring-orange-600' : ''}`}
|
||||
onClick={() => handleInputChange('interestCategory', 'telecom')}
|
||||
>
|
||||
<CardHeader>
|
||||
<Network className="w-16 h-16 mx-auto mb-4 text-orange-600" />
|
||||
<CardTitle className="text-orange-600">Telecom/ISP</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Extend your network with edge computing.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card
|
||||
className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'investor' ? 'border-teal-600 ring-2 ring-teal-600' : ''}`}
|
||||
onClick={() => handleInputChange('interestCategory', 'investor')}
|
||||
>
|
||||
<CardHeader>
|
||||
<DollarSign className="w-16 h-16 mx-auto mb-4 text-teal-600" />
|
||||
<CardTitle className="text-teal-600">Investor/Partner</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Join the ThreeFold ecosystem.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card
|
||||
className={`text-center hover:shadow-lg transition-shadow cursor-pointer ${formData.interestCategory === 'individual' ? 'border-indigo-600 ring-2 ring-indigo-600' : ''}`}
|
||||
onClick={() => handleInputChange('interestCategory', 'individual')}
|
||||
>
|
||||
<CardHeader>
|
||||
<Users className="w-16 h-16 mx-auto mb-4 text-indigo-600" />
|
||||
<CardTitle className="text-indigo-600">Individual/Community</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Start with residential deployment.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Form */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-green-50">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Tell Us About Your Interest</h2>
|
||||
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
|
||||
Please fill out the form below. Fields will adapt based on your selection above.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="bg-white shadow-xl">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl text-center">Required Information</CardTitle>
|
||||
<CardDescription className="text-center text-lg">
|
||||
Provide your contact details and a brief description of your requirements.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
{submitStatus === 'success' && (
|
||||
<div className="flex items-center gap-2 p-4 bg-green-50 border border-green-200 rounded-lg text-green-800">
|
||||
<CheckCircle className="h-5 w-5" />
|
||||
<span>Thank you! Your interest has been registered successfully. We'll be in touch soon.</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{submitStatus === 'error' && (
|
||||
<div className="flex items-center gap-2 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800">
|
||||
<AlertCircle className="h-5 w-5" />
|
||||
<span>There was an error registering your interest. Please ensure all required fields are filled and terms are agreed.</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* General Information */}
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-xl font-semibold text-slate-900 flex items-center gap-2">
|
||||
<Users className="h-5 w-5 text-blue-600" />
|
||||
Your Contact Details
|
||||
</h3>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Full Name *</Label>
|
||||
<Input
|
||||
id="name"
|
||||
placeholder="Your full name"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email Address *</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleInputChange('email', e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="company">Organization</Label>
|
||||
<Input
|
||||
id="company"
|
||||
placeholder="Your company or organization"
|
||||
value={formData.company}
|
||||
onChange={(e) => handleInputChange('company', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dynamic Fields based on Interest Category */}
|
||||
{formData.interestCategory && (
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-xl font-semibold text-slate-900 flex items-center gap-2">
|
||||
<Target className="h-5 w-5 text-green-600" />
|
||||
Specific Requirements for {formData.interestCategory.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}
|
||||
</h3>
|
||||
{renderFormFields()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Common Optional Information */}
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-xl font-semibold text-slate-900 flex items-center gap-2">
|
||||
<BookOpen className="h-5 w-5 text-purple-600" />
|
||||
Additional Information (Optional)
|
||||
</h3>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="briefDescription">Brief Description of Requirements</Label>
|
||||
<Textarea
|
||||
id="briefDescription"
|
||||
placeholder="Tell us more about your needs and how ThreeFold can help."
|
||||
value={formData.briefDescription}
|
||||
onChange={(e) => handleInputChange('briefDescription', e.target.value)}
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="timeline">Timeline for Deployment</Label>
|
||||
<Input id="timeline" placeholder="e.g., Immediate, 3-6 months, 1 year+" value={formData.timeline} onChange={(e) => handleInputChange('timeline', e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="newsletter"
|
||||
checked={formData.newsletter}
|
||||
onCheckedChange={(checked) => handleInputChange('newsletter', checked)}
|
||||
/>
|
||||
<Label htmlFor="newsletter" className="text-sm">
|
||||
I'd like to receive updates about ThreeFold Cloud's progress and opportunities
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Terms */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start space-x-2">
|
||||
<Checkbox
|
||||
id="terms"
|
||||
checked={formData.terms}
|
||||
onCheckedChange={(checked) => handleInputChange('terms', checked)}
|
||||
required
|
||||
/>
|
||||
<Label htmlFor="terms" className="text-sm">
|
||||
I agree to the <Link to="/terms" className="text-blue-600 hover:underline">Terms and Conditions</Link> and <Link to="/privacy" className="text-blue-600 hover:underline">Privacy Policy</Link>. *
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div className="pt-6">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitting || !formData.terms || !formData.name || !formData.email || !formData.interestCategory}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-lg py-3"
|
||||
>
|
||||
{isSubmitting ? 'Submitting...' : 'Register Your Interest'}
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What Happens Next */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">What Happens After You Submit?</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-2xl font-bold text-blue-600">1</span>
|
||||
</div>
|
||||
<CardTitle className="text-blue-600">Confirmation & Assignment</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Receive a confirmation email and get assigned to the appropriate specialist within 24 hours.
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-2xl font-bold text-green-600">2</span>
|
||||
</div>
|
||||
<CardTitle className="text-green-600">Personalized Consultation</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Within 1 week, receive a personalized consultation call and a custom proposal or assessment.
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-2xl font-bold text-purple-600">3</span>
|
||||
</div>
|
||||
<CardTitle className="text-purple-600">Ongoing Engagement</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Receive regular updates, invitations to events, and access to exclusive resources.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Frequently Asked Questions */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Common Questions</h2>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-blue-600">Q: What's the minimum investment to get started?</CardTitle></CardHeader>
|
||||
<CardContent>A: Tier-H nodes start at under $5,000. Tier-S deployments vary based on scale and requirements.</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-green-600">Q: How long does deployment take?</CardTitle></CardHeader>
|
||||
<CardContent>A: Tier-H nodes can be deployed in minutes. Tier-S datacenters typically deploy in 3-6 months.</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-purple-600">Q: What kind of support do you provide?</CardTitle></CardHeader>
|
||||
<CardContent>A: Comprehensive support from planning through deployment and ongoing operations.</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-orange-600">Q: Is the technology proven?</CardTitle></CardHeader>
|
||||
<CardContent>A: Yes, with 2000+ nodes deployed globally and years of production experience.</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-teal-600">Q: How do I know this will work for my use case?</CardTitle></CardHeader>
|
||||
<CardContent>A: We offer pilot programs and proof-of-concept deployments to validate fit.</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Social Proof & Urgency */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Join Leading Organizations Already Building the Future</h2>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-blue-600">70+ countries with active infrastructure</CardTitle></CardHeader>
|
||||
<CardContent>Global reach and decentralized presence.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-green-600">Government agencies building sovereign systems</CardTitle></CardHeader>
|
||||
<CardContent>Trusted by public sector for digital sovereignty.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-purple-600">Enterprises reducing cloud costs by 10x</CardTitle></CardHeader>
|
||||
<CardContent>Significant economic advantages for businesses.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-orange-600">Communities creating local digital resilience</CardTitle></CardHeader>
|
||||
<CardContent>Empowering local digital infrastructure.</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<p className="text-lg text-slate-600 mt-8">
|
||||
Limited Availability: Priority access for early partners, exclusive pricing for first deployments, limited technical support capacity, growing demand for deployment slots.
|
||||
</p>
|
||||
<p className="text-xl font-bold text-blue-600 mt-4">Don't Wait - The Future is Being Built Now</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
|
||||
<div className="max-w-6xl mx-auto text-center">
|
||||
<div className="flex items-center justify-center space-x-2 mb-4">
|
||||
<Globe className="h-6 w-6 text-blue-400" />
|
||||
<span className="text-xl font-bold">ThreeFold Cloud</span>
|
||||
</div>
|
||||
<p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
|
||||
<p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Cloud. A new era of decentralized infrastructure.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RegisterPage
|
||||
554
src/components/TechnologyPage.jsx
Normal file
554
src/components/TechnologyPage.jsx
Normal file
@@ -0,0 +1,554 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Button } from './ui/button'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
|
||||
import { Badge } from './ui/badge'
|
||||
import { Cpu, Database, Network, Shield, Zap, Scale, Globe, CheckCircle, BookOpen, Brain, Layers } from 'lucide-react'
|
||||
import Navigation from './Navigation'
|
||||
|
||||
function TechnologyPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
|
||||
{/* Navigation */}
|
||||
<Navigation />
|
||||
|
||||
{/* Technology Hero Section */}
|
||||
<section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-5xl mx-auto text-center space-y-8">
|
||||
<Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Our Innovations</Badge>
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight">
|
||||
Infrastructure Reimagined from <span className="text-blue-600">First Principles</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto leading-relaxed">
|
||||
ThreeFold's technology stack represents the most significant advancement in cloud infrastructure since virtualization. Built on breakthrough innovations in compute, storage, and networking that solve the fundamental problems of centralized systems.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Core Technology Pillars */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Three Pillars of Innovation</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Overview of the three main technology innovations that power ThreeFold.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
|
||||
<CardHeader>
|
||||
<Cpu className="w-16 h-16 mx-auto mb-4 text-blue-600" />
|
||||
<CardTitle className="text-blue-600">Zero-OS Compute System</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-1 text-sm text-slate-700">
|
||||
<li>Stateless, autonomous operating system</li>
|
||||
<li>Depending the usecase can more efficient than traditional systems</li>
|
||||
<li>Self-healing and cryptographically secured</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-green-200">
|
||||
<CardHeader>
|
||||
<Database className="w-16 h-16 mx-auto mb-4 text-green-600" />
|
||||
<CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-1 text-sm text-slate-700">
|
||||
<li>Mathematical data dispersion (not replication)</li>
|
||||
<li>20% overhead vs 400% in traditional systems</li>
|
||||
<li>Unbreakable and self-healing architecture</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
|
||||
<CardHeader>
|
||||
<Network className="w-16 h-16 mx-auto mb-4 text-purple-600" />
|
||||
<CardTitle className="text-purple-600">Mycelium Network</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-1 text-sm text-slate-700">
|
||||
<li>Peer-to-peer mesh overlay network</li>
|
||||
<li>End-to-end encryption with shortest path routing</li>
|
||||
<li>Resilient to internet failures and attacks</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Zero-OS: Autonomous Compute */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Zero-OS: The World's First Stateless Cloud OS</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Deep dive into the revolutionary operating system that powers ThreeFold.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-blue-600">Core Principles:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Autonomy:</strong> Operates without human maintenance</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Simplicity:</strong> Minimal 40MB footprint with only essential components</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Stateless Design:</strong> No persistent local state, immune to corruption</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-blue-600">Revolutionary Features:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Zero-Install:</strong> Boots from network, no local installation</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Zero-Images:</strong> Container images 1000x smaller (2MB vs 2GB)</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Smart Contract for IT:</strong> Cryptographically secured deployments</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Deterministic Execution:</strong> Reproducible, tamper-proof workloads</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 text-center">
|
||||
<h3 className="text-2xl font-bold text-blue-600 mb-6">Technical Advantages:</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-blue-600">Eliminates context switching overhead</CardTitle></CardHeader>
|
||||
<CardContent>Depending workload can eliminates upto 90% of context switching overhead.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-green-600">Cryptographic verification</CardTitle></CardHeader>
|
||||
<CardContent>Ensures integrity of all components.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-purple-600">Self-healing and autonomous</CardTitle></CardHeader>
|
||||
<CardContent>Operates without human intervention.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-orange-600">Compatible with Docker, Kubernetes, and VMs</CardTitle></CardHeader>
|
||||
<CardContent>Flexible for diverse workloads.</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Quantum-Safe Storage: Unbreakable Data */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Quantum-Safe Storage: Mathematics Over Replication</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Explanation of the mathematical storage breakthrough that ensures unbreakable data.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-green-600">How It Works:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Data is fragmented and transformed into mathematical equations</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Equations are distributed across multiple nodes</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Original data fragments are discarded</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Any subset of equations can reconstruct the original data</li>
|
||||
</ul>
|
||||
<h3 className="text-2xl font-bold text-green-600 mt-8">Production Configuration (16/4):</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> 16 data fragments become 20 equations</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Only 16 equations needed for reconstruction</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Can lose any 4 nodes without data loss</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> 20% overhead vs 400% in traditional systems</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-green-600">Example (Simplified):</h3>
|
||||
<div className="bg-slate-100 p-4 rounded-lg font-mono text-sm text-slate-800">
|
||||
<pre><code>
|
||||
Original fragments: a=1, b=2, c=3
|
||||
Generated equations:
|
||||
- a+b+c=6
|
||||
- c-b-a=0
|
||||
- 2b+a-c=2
|
||||
- 5c-b-a=12
|
||||
</code></pre>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-green-600 mt-8">Zero-Knowledge Architecture:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> No single node knows what it stores</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Cryptographic proof without data exposure</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Post-quantum security resistant</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Self-healing against bitrot and failures</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Mycelium Network: Intelligent Connectivity */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Mycelium Network: The Internet's Missing Layer</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Technical deep dive into the networking innovation that ensures intelligent and resilient connectivity.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-teal-600">Core Capabilities:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>End-to-End Encryption:</strong> Data encrypted at source, decrypted at destination</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>Shortest Path Routing:</strong> Dynamic optimization based on latency, bandwidth, reliability</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>Multi-Hop Transmission:</strong> Resilient routing through intermediate nodes</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>Geographic Awareness:</strong> Physical location optimization</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-teal-600">Technical Implementation:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Peer-to-peer mesh topology</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Up to 1 Gbps throughput per agent</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Wire-speed performance in infrastructure (100+ Gbps)</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Protocol-agnostic data transport</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Authentication-based security (not perimeter-based)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 text-center">
|
||||
<h3 className="text-2xl font-bold text-teal-600 mb-6">Beyond Traditional Networking:</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-teal-600">Survives internet outages</CardTitle></CardHeader>
|
||||
<CardContent>Ensures continuity even during major disruptions.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-blue-600">Routes around censorship</CardTitle></CardHeader>
|
||||
<CardContent>Provides resilient access in restricted environments.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-green-600">Enables true peer-to-peer</CardTitle></CardHeader>
|
||||
<CardContent>Facilitates direct communication between users.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-purple-600">Reduces latency</CardTitle></CardHeader>
|
||||
<CardContent>Through optimal path selection and local routing.</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Architectural Innovations */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Integrated Architecture: Greater Than Sum of Parts</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
How ThreeFold's core technologies work together to create a superior infrastructure.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-blue-600">Geo-Aware Infrastructure:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Data sovereignty with precise location control</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Compliance with local regulations (GDPR, etc.)</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Shortest physical paths for efficiency</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Resilient to geopolitical disruptions</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-blue-600">Smart Contract for IT:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Cryptographically secured deployments</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Multi-signature authentication</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Immutable execution records on blockchain</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Autonomous management without human intervention</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 text-center">
|
||||
<h3 className="text-2xl font-bold text-blue-600 mb-6">Energy Efficiency Breakthrough:</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-blue-600">Up to 10x less energy</CardTitle></CardHeader>
|
||||
<CardContent>Compared to traditional datacenters.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-green-600">Optimized hardware utilization</CardTitle></CardHeader>
|
||||
<CardContent>Maximizing efficiency from every component.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-purple-600">Reduced data movement</CardTitle></CardHeader>
|
||||
<CardContent>Minimizing energy waste in data transfer.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-orange-600">Green computing</CardTitle></CardHeader>
|
||||
<CardContent>Sustainable infrastructure at planetary scale.</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Technical Comparisons */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">ThreeFold vs Traditional Infrastructure</h2>
|
||||
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
|
||||
Side-by-side comparison with traditional approaches.
|
||||
</p>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full bg-white rounded-lg shadow-md">
|
||||
<thead>
|
||||
<tr className="bg-blue-600 text-white">
|
||||
<th className="py-3 px-4 text-left">Aspect</th>
|
||||
<th className="py-3 px-4 text-left">Traditional Cloud</th>
|
||||
<th className="py-3 px-4 text-left">ThreeFold</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">OS Deployment</td>
|
||||
<td className="py-3 px-4">Local installation, complex updates</td>
|
||||
<td className="py-3 px-4 font-semibold">Network boot, stateless</td>
|
||||
</tr>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">Container Images</td>
|
||||
<td className="py-3 px-4">2GB+ monolithic images</td>
|
||||
<td className="py-3 px-4 font-semibold">2MB metadata-only</td>
|
||||
</tr>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">Storage Redundancy</td>
|
||||
<td className="py-3 px-4">400% overhead (4 copies)</td>
|
||||
<td className="py-3 px-4 font-semibold">20% overhead (math)</td>
|
||||
</tr>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">Network Security</td>
|
||||
<td className="py-3 px-4">Perimeter-based firewalls</td>
|
||||
<td className="py-3 px-4 font-semibold">End-to-end encryption</td>
|
||||
</tr>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">Management</td>
|
||||
<td className="py-3 px-4">Human administrators</td>
|
||||
<td className="py-3 px-4 font-semibold">Autonomous agents</td>
|
||||
</tr>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">Scalability</td>
|
||||
<td className="py-3 px-4">Vertical, expensive</td>
|
||||
<td className="py-3 px-4 font-semibold">Horizontal, unlimited</td>
|
||||
</tr>
|
||||
<tr className="border-b border-slate-200">
|
||||
<td className="py-3 px-4">Energy Efficiency</td>
|
||||
<td className="py-3 px-4">High consumption</td>
|
||||
<td className="py-3 px-4 font-semibold">10x more efficient</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4">Data Sovereignty</td>
|
||||
<td className="py-3 px-4">Limited control</td>
|
||||
<td className="py-3 px-4 font-semibold">Complete control</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Implementation Status & Roadmap */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Production-Ready Technology & Roadmap</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Current status and future developments of ThreeFold's technology.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-blue-600">Currently Available:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-OS Core: Production (multiple years)</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Quantum-Safe Storage: Production</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Mycelium Network: Beta (v3.13+)</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Web Gateway: Production</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-blue-600">Coming H2 2025:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Smart Contract for IT: General availability</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Geo-Aware AI Agents (3AI)</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> 3CORE Ledger: Geo-fenced blockchain</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> FungiStor: Global content delivery</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Enhanced enterprise features</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 text-center">
|
||||
<h3 className="text-2xl font-bold text-blue-600 mb-6">Live Deployment Stats:</h3>
|
||||
<ul className="space-y-2 text-lg text-slate-700">
|
||||
<li>2000+ nodes across 70+ countries</li>
|
||||
<li>60,000+ CPU cores active</li>
|
||||
<li>1+ million contracts processed</li>
|
||||
<li>Petabytes of data stored safely</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Open Source & Standards */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Built on Open Principles</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Commitment to openness and interoperability.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-purple-600">Open Source Components:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Core technology stack available on GitHub</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Community-driven development</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Transparent security auditing</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> No vendor lock-in</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-purple-600">Standards Compliance:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> POSIX filesystem compatibility</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Docker and Kubernetes support</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Standard networking protocols</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Blockchain interoperability</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 text-center">
|
||||
<h3 className="text-2xl font-bold text-purple-600 mb-6">Developer Ecosystem:</h3>
|
||||
<ul className="space-y-2 text-lg text-slate-700">
|
||||
<li>Comprehensive APIs and SDKs</li>
|
||||
<li>Extensive documentation</li>
|
||||
<li>Active community support</li>
|
||||
<li>Regular hackathons and events</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Security & Compliance */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Security by Design & Compliance</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Advanced security features and compliance capabilities.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-blue-600">Cryptographic Foundation:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> End-to-end encryption everywhere</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Post-quantum cryptography ready</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-knowledge data storage</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Immutable audit trails</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-blue-600">Compliance Features:</h3>
|
||||
<ul className="space-y-3 text-lg text-slate-700">
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> GDPR compliance through data sovereignty</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Regulatory jurisdiction control</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Audit-ready transaction logs</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Data residency guarantees</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 text-center">
|
||||
<h3 className="text-2xl font-bold text-blue-600 mb-6">Threat Resistance:</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-blue-600">Immune to ransomware</CardTitle></CardHeader>
|
||||
<CardContent>Stateless OS prevents persistent threats.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-green-600">DDoS resistant</CardTitle></CardHeader>
|
||||
<CardContent>Distributed architecture mitigates attacks.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-purple-600">Quantum computing resistant</CardTitle></CardHeader>
|
||||
<CardContent>Future-proof security protocols.</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader><CardTitle className="text-orange-600">Censorship resistant</CardTitle></CardHeader>
|
||||
<CardContent>Mycelium network routes around blocking.</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Technical Resources */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Dive Deeper into ThreeFold Technology</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Access comprehensive technical documentation and resources.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-blue-600">Technical Documentation</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-slate-700">
|
||||
<li>Architecture whitepapers</li>
|
||||
<li>API documentation</li>
|
||||
<li>Deployment guides</li>
|
||||
<li>Best practices</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-purple-600">Try It Yourself</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-slate-700">
|
||||
<li>Live dashboard: <a href="https://dashboard.grid.tf" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://dashboard.grid.tf</a></li>
|
||||
<li>GitHub repositories</li>
|
||||
<li>Developer sandbox</li>
|
||||
<li>Community forums</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="mt-12 text-center">
|
||||
<h3 className="text-2xl font-bold text-blue-600 mb-6">Get Support:</h3>
|
||||
<ul className="space-y-2 text-lg text-slate-700">
|
||||
<li>Technical community</li>
|
||||
<li>Professional services</li>
|
||||
<li>Training programs</li>
|
||||
<li>Certification paths</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
|
||||
<div className="max-w-6xl mx-auto text-center">
|
||||
<div className="flex items-center justify-center space-x-2 mb-4">
|
||||
<Globe className="h-6 w-6 text-blue-400" />
|
||||
<span className="text-xl font-bold">ThreeFold Cloud</span>
|
||||
</div>
|
||||
<p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
|
||||
<p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Cloud. A new era of decentralized infrastructure.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TechnologyPage
|
||||
62
src/components/ui/accordion.jsx
Normal file
62
src/components/ui/accordion.jsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import * as React from "react"
|
||||
import * as AccordionPrimitive from "@radix-ui/react-accordion"
|
||||
import { ChevronDownIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Accordion({
|
||||
...props
|
||||
}) {
|
||||
return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
|
||||
}
|
||||
|
||||
function AccordionItem({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<AccordionPrimitive.Item
|
||||
data-slot="accordion-item"
|
||||
className={cn("border-b last:border-b-0", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function AccordionTrigger({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
data-slot="accordion-trigger"
|
||||
className={cn(
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{children}
|
||||
<ChevronDownIcon
|
||||
className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
);
|
||||
}
|
||||
|
||||
function AccordionContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<AccordionPrimitive.Content
|
||||
data-slot="accordion-content"
|
||||
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
|
||||
{...props}>
|
||||
<div className={cn("pt-0 pb-4", className)}>{children}</div>
|
||||
</AccordionPrimitive.Content>
|
||||
);
|
||||
}
|
||||
|
||||
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
|
||||
138
src/components/ui/alert-dialog.jsx
Normal file
138
src/components/ui/alert-dialog.jsx
Normal file
@@ -0,0 +1,138 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { buttonVariants } from "@/components/ui/button"
|
||||
|
||||
function AlertDialog({
|
||||
...props
|
||||
}) {
|
||||
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
|
||||
}
|
||||
|
||||
function AlertDialogTrigger({
|
||||
...props
|
||||
}) {
|
||||
return (<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />);
|
||||
}
|
||||
|
||||
function AlertDialogPortal({
|
||||
...props
|
||||
}) {
|
||||
return (<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />);
|
||||
}
|
||||
|
||||
function AlertDialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Overlay
|
||||
data-slot="alert-dialog-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogContent({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay />
|
||||
<AlertDialogPrimitive.Content
|
||||
data-slot="alert-dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
</AlertDialogPortal>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogHeader({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogFooter({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-footer"
|
||||
className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogTitle({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Title
|
||||
data-slot="alert-dialog-title"
|
||||
className={cn("text-lg font-semibold", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogDescription({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Description
|
||||
data-slot="alert-dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialogAction({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (<AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />);
|
||||
}
|
||||
|
||||
function AlertDialogCancel({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Cancel
|
||||
className={cn(buttonVariants({ variant: "outline" }), className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
AlertDialog,
|
||||
AlertDialogPortal,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogTrigger,
|
||||
AlertDialogContent,
|
||||
AlertDialogHeader,
|
||||
AlertDialogFooter,
|
||||
AlertDialogTitle,
|
||||
AlertDialogDescription,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
}
|
||||
63
src/components/ui/alert.jsx
Normal file
63
src/components/ui/alert.jsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import * as React from "react"
|
||||
import { cva } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const alertVariants = cva(
|
||||
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-card text-card-foreground",
|
||||
destructive:
|
||||
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Alert({
|
||||
className,
|
||||
variant,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert"
|
||||
role="alert"
|
||||
className={cn(alertVariants({ variant }), className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function AlertTitle({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-title"
|
||||
className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDescription({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-description"
|
||||
className={cn(
|
||||
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription }
|
||||
9
src/components/ui/aspect-ratio.jsx
Normal file
9
src/components/ui/aspect-ratio.jsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
|
||||
|
||||
function AspectRatio({
|
||||
...props
|
||||
}) {
|
||||
return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
|
||||
}
|
||||
|
||||
export { AspectRatio }
|
||||
47
src/components/ui/avatar.jsx
Normal file
47
src/components/ui/avatar.jsx
Normal file
@@ -0,0 +1,47 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Avatar({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<AvatarPrimitive.Root
|
||||
data-slot="avatar"
|
||||
className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function AvatarImage({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<AvatarPrimitive.Image
|
||||
data-slot="avatar-image"
|
||||
className={cn("aspect-square size-full", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function AvatarFallback({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<AvatarPrimitive.Fallback
|
||||
data-slot="avatar-fallback"
|
||||
className={cn(
|
||||
"bg-muted flex size-full items-center justify-center rounded-full",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export { Avatar, AvatarImage, AvatarFallback }
|
||||
44
src/components/ui/badge.jsx
Normal file
44
src/components/ui/badge.jsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant,
|
||||
asChild = false,
|
||||
...props
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "span"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="badge"
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
112
src/components/ui/breadcrumb.jsx
Normal file
112
src/components/ui/breadcrumb.jsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { ChevronRight, MoreHorizontal } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Breadcrumb({
|
||||
...props
|
||||
}) {
|
||||
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
|
||||
}
|
||||
|
||||
function BreadcrumbList({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ol
|
||||
data-slot="breadcrumb-list"
|
||||
className={cn(
|
||||
"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function BreadcrumbItem({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<li
|
||||
data-slot="breadcrumb-item"
|
||||
className={cn("inline-flex items-center gap-1.5", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function BreadcrumbLink({
|
||||
asChild,
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "a"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="breadcrumb-link"
|
||||
className={cn("hover:text-foreground transition-colors", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function BreadcrumbPage({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
data-slot="breadcrumb-page"
|
||||
role="link"
|
||||
aria-disabled="true"
|
||||
aria-current="page"
|
||||
className={cn("text-foreground font-normal", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function BreadcrumbSeparator({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<li
|
||||
data-slot="breadcrumb-separator"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
className={cn("[&>svg]:size-3.5", className)}
|
||||
{...props}>
|
||||
{children ?? <ChevronRight />}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function BreadcrumbEllipsis({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
data-slot="breadcrumb-ellipsis"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
className={cn("flex size-9 items-center justify-center", className)}
|
||||
{...props}>
|
||||
<MoreHorizontal className="size-4" />
|
||||
<span className="sr-only">More</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Breadcrumb,
|
||||
BreadcrumbList,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
BreadcrumbEllipsis,
|
||||
}
|
||||
55
src/components/ui/button.jsx
Normal file
55
src/components/ui/button.jsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
asChild = false,
|
||||
...props
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
72
src/components/ui/calendar.jsx
Normal file
72
src/components/ui/calendar.jsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import * as React from "react"
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react"
|
||||
import { DayPicker } from "react-day-picker"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { buttonVariants } from "@/components/ui/button"
|
||||
|
||||
function Calendar({
|
||||
className,
|
||||
classNames,
|
||||
showOutsideDays = true,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DayPicker
|
||||
showOutsideDays={showOutsideDays}
|
||||
className={cn("p-3", className)}
|
||||
classNames={{
|
||||
months: "flex flex-col sm:flex-row gap-2",
|
||||
month: "flex flex-col gap-4",
|
||||
caption: "flex justify-center pt-1 relative items-center w-full",
|
||||
caption_label: "text-sm font-medium",
|
||||
nav: "flex items-center gap-1",
|
||||
nav_button: cn(
|
||||
buttonVariants({ variant: "outline" }),
|
||||
"size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
|
||||
),
|
||||
nav_button_previous: "absolute left-1",
|
||||
nav_button_next: "absolute right-1",
|
||||
table: "w-full border-collapse space-x-1",
|
||||
head_row: "flex",
|
||||
head_cell:
|
||||
"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
|
||||
row: "flex w-full mt-2",
|
||||
cell: cn(
|
||||
"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
|
||||
props.mode === "range"
|
||||
? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
|
||||
: "[&:has([aria-selected])]:rounded-md"
|
||||
),
|
||||
day: cn(
|
||||
buttonVariants({ variant: "ghost" }),
|
||||
"size-8 p-0 font-normal aria-selected:opacity-100"
|
||||
),
|
||||
day_range_start:
|
||||
"day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
|
||||
day_range_end:
|
||||
"day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
|
||||
day_selected:
|
||||
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
|
||||
day_today: "bg-accent text-accent-foreground",
|
||||
day_outside:
|
||||
"day-outside text-muted-foreground aria-selected:text-muted-foreground",
|
||||
day_disabled: "text-muted-foreground opacity-50",
|
||||
day_range_middle:
|
||||
"aria-selected:bg-accent aria-selected:text-accent-foreground",
|
||||
day_hidden: "invisible",
|
||||
...classNames,
|
||||
}}
|
||||
components={{
|
||||
IconLeft: ({ className, ...props }) => (
|
||||
<ChevronLeft className={cn("size-4", className)} {...props} />
|
||||
),
|
||||
IconRight: ({ className, ...props }) => (
|
||||
<ChevronRight className={cn("size-4", className)} {...props} />
|
||||
),
|
||||
}}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export { Calendar }
|
||||
101
src/components/ui/card.jsx
Normal file
101
src/components/ui/card.jsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function CardHeader({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function CardTitle({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function CardDescription({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function CardAction({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function CardContent({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (<div data-slot="card-content" className={cn("px-6", className)} {...props} />);
|
||||
}
|
||||
|
||||
function CardFooter({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
195
src/components/ui/carousel.jsx
Normal file
195
src/components/ui/carousel.jsx
Normal file
@@ -0,0 +1,195 @@
|
||||
"use client";
|
||||
import * as React from "react"
|
||||
import useEmblaCarousel from "embla-carousel-react";
|
||||
import { ArrowLeft, ArrowRight } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
const CarouselContext = React.createContext(null)
|
||||
|
||||
function useCarousel() {
|
||||
const context = React.useContext(CarouselContext)
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useCarousel must be used within a <Carousel />")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
function Carousel({
|
||||
orientation = "horizontal",
|
||||
opts,
|
||||
setApi,
|
||||
plugins,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
const [carouselRef, api] = useEmblaCarousel({
|
||||
...opts,
|
||||
axis: orientation === "horizontal" ? "x" : "y",
|
||||
}, plugins)
|
||||
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
|
||||
const [canScrollNext, setCanScrollNext] = React.useState(false)
|
||||
|
||||
const onSelect = React.useCallback((api) => {
|
||||
if (!api) return
|
||||
setCanScrollPrev(api.canScrollPrev())
|
||||
setCanScrollNext(api.canScrollNext())
|
||||
}, [])
|
||||
|
||||
const scrollPrev = React.useCallback(() => {
|
||||
api?.scrollPrev()
|
||||
}, [api])
|
||||
|
||||
const scrollNext = React.useCallback(() => {
|
||||
api?.scrollNext()
|
||||
}, [api])
|
||||
|
||||
const handleKeyDown = React.useCallback((event) => {
|
||||
if (event.key === "ArrowLeft") {
|
||||
event.preventDefault()
|
||||
scrollPrev()
|
||||
} else if (event.key === "ArrowRight") {
|
||||
event.preventDefault()
|
||||
scrollNext()
|
||||
}
|
||||
}, [scrollPrev, scrollNext])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api || !setApi) return
|
||||
setApi(api)
|
||||
}, [api, setApi])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api) return
|
||||
onSelect(api)
|
||||
api.on("reInit", onSelect)
|
||||
api.on("select", onSelect)
|
||||
|
||||
return () => {
|
||||
api?.off("select", onSelect)
|
||||
};
|
||||
}, [api, onSelect])
|
||||
|
||||
return (
|
||||
<CarouselContext.Provider
|
||||
value={{
|
||||
carouselRef,
|
||||
api: api,
|
||||
opts,
|
||||
orientation:
|
||||
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
||||
scrollPrev,
|
||||
scrollNext,
|
||||
canScrollPrev,
|
||||
canScrollNext,
|
||||
}}>
|
||||
<div
|
||||
onKeyDownCapture={handleKeyDown}
|
||||
className={cn("relative", className)}
|
||||
role="region"
|
||||
aria-roledescription="carousel"
|
||||
data-slot="carousel"
|
||||
{...props}>
|
||||
{children}
|
||||
</div>
|
||||
</CarouselContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function CarouselContent({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
const { carouselRef, orientation } = useCarousel()
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={carouselRef}
|
||||
className="overflow-hidden"
|
||||
data-slot="carousel-content">
|
||||
<div
|
||||
className={cn(
|
||||
"flex",
|
||||
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CarouselItem({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
const { orientation } = useCarousel()
|
||||
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
aria-roledescription="slide"
|
||||
data-slot="carousel-item"
|
||||
className={cn(
|
||||
"min-w-0 shrink-0 grow-0 basis-full",
|
||||
orientation === "horizontal" ? "pl-4" : "pt-4",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function CarouselPrevious({
|
||||
className,
|
||||
variant = "outline",
|
||||
size = "icon",
|
||||
...props
|
||||
}) {
|
||||
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-slot="carousel-previous"
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn("absolute size-8 rounded-full", orientation === "horizontal"
|
||||
? "top-1/2 -left-12 -translate-y-1/2"
|
||||
: "-top-12 left-1/2 -translate-x-1/2 rotate-90", className)}
|
||||
disabled={!canScrollPrev}
|
||||
onClick={scrollPrev}
|
||||
{...props}>
|
||||
<ArrowLeft />
|
||||
<span className="sr-only">Previous slide</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
function CarouselNext({
|
||||
className,
|
||||
variant = "outline",
|
||||
size = "icon",
|
||||
...props
|
||||
}) {
|
||||
const { orientation, scrollNext, canScrollNext } = useCarousel()
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-slot="carousel-next"
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn("absolute size-8 rounded-full", orientation === "horizontal"
|
||||
? "top-1/2 -right-12 -translate-y-1/2"
|
||||
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className)}
|
||||
disabled={!canScrollNext}
|
||||
onClick={scrollNext}
|
||||
{...props}>
|
||||
<ArrowRight />
|
||||
<span className="sr-only">Next slide</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
|
||||
309
src/components/ui/chart.jsx
Normal file
309
src/components/ui/chart.jsx
Normal file
@@ -0,0 +1,309 @@
|
||||
import * as React from "react"
|
||||
import * as RechartsPrimitive from "recharts"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
// Format: { THEME_NAME: CSS_SELECTOR }
|
||||
const THEMES = {
|
||||
light: "",
|
||||
dark: ".dark"
|
||||
}
|
||||
|
||||
const ChartContext = React.createContext(null)
|
||||
|
||||
function useChart() {
|
||||
const context = React.useContext(ChartContext)
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useChart must be used within a <ChartContainer />")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
function ChartContainer({
|
||||
id,
|
||||
className,
|
||||
children,
|
||||
config,
|
||||
...props
|
||||
}) {
|
||||
const uniqueId = React.useId()
|
||||
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
|
||||
|
||||
return (
|
||||
<ChartContext.Provider value={{ config }}>
|
||||
<div
|
||||
data-slot="chart"
|
||||
data-chart={chartId}
|
||||
className={cn(
|
||||
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
<ChartStyle id={chartId} config={config} />
|
||||
<RechartsPrimitive.ResponsiveContainer>
|
||||
{children}
|
||||
</RechartsPrimitive.ResponsiveContainer>
|
||||
</div>
|
||||
</ChartContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
const ChartStyle = ({
|
||||
id,
|
||||
config
|
||||
}) => {
|
||||
const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color)
|
||||
|
||||
if (!colorConfig.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: Object.entries(THEMES)
|
||||
.map(([theme, prefix]) => `
|
||||
${prefix} [data-chart=${id}] {
|
||||
${colorConfig
|
||||
.map(([key, itemConfig]) => {
|
||||
const color =
|
||||
itemConfig.theme?.[theme] ||
|
||||
itemConfig.color
|
||||
return color ? ` --color-${key}: ${color};` : null
|
||||
})
|
||||
.join("\n")}
|
||||
}
|
||||
`)
|
||||
.join("\n"),
|
||||
}} />
|
||||
);
|
||||
}
|
||||
|
||||
const ChartTooltip = RechartsPrimitive.Tooltip
|
||||
|
||||
function ChartTooltipContent({
|
||||
active,
|
||||
payload,
|
||||
className,
|
||||
indicator = "dot",
|
||||
hideLabel = false,
|
||||
hideIndicator = false,
|
||||
label,
|
||||
labelFormatter,
|
||||
labelClassName,
|
||||
formatter,
|
||||
color,
|
||||
nameKey,
|
||||
labelKey
|
||||
}) {
|
||||
const { config } = useChart()
|
||||
|
||||
const tooltipLabel = React.useMemo(() => {
|
||||
if (hideLabel || !payload?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
const [item] = payload
|
||||
const key = `${labelKey || item?.dataKey || item?.name || "value"}`
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
||||
const value =
|
||||
!labelKey && typeof label === "string"
|
||||
? config[label]?.label || label
|
||||
: itemConfig?.label
|
||||
|
||||
if (labelFormatter) {
|
||||
return (
|
||||
<div className={cn("font-medium", labelClassName)}>
|
||||
{labelFormatter(value, payload)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <div className={cn("font-medium", labelClassName)}>{value}</div>;
|
||||
}, [
|
||||
label,
|
||||
labelFormatter,
|
||||
payload,
|
||||
hideLabel,
|
||||
labelClassName,
|
||||
config,
|
||||
labelKey,
|
||||
])
|
||||
|
||||
if (!active || !payload?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
const nestLabel = payload.length === 1 && indicator !== "dot"
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
|
||||
className
|
||||
)}>
|
||||
{!nestLabel ? tooltipLabel : null}
|
||||
<div className="grid gap-1.5">
|
||||
{payload.map((item, index) => {
|
||||
const key = `${nameKey || item.name || item.dataKey || "value"}`
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
||||
const indicatorColor = color || item.payload.fill || item.color
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.dataKey}
|
||||
className={cn(
|
||||
"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
|
||||
indicator === "dot" && "items-center"
|
||||
)}>
|
||||
{formatter && item?.value !== undefined && item.name ? (
|
||||
formatter(item.value, item.name, item, index, item.payload)
|
||||
) : (
|
||||
<>
|
||||
{itemConfig?.icon ? (
|
||||
<itemConfig.icon />
|
||||
) : (
|
||||
!hideIndicator && (
|
||||
<div
|
||||
className={cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
|
||||
"h-2.5 w-2.5": indicator === "dot",
|
||||
"w-1": indicator === "line",
|
||||
"w-0 border-[1.5px] border-dashed bg-transparent":
|
||||
indicator === "dashed",
|
||||
"my-0.5": nestLabel && indicator === "dashed",
|
||||
})}
|
||||
style={
|
||||
{
|
||||
"--color-bg": indicatorColor,
|
||||
"--color-border": indicatorColor
|
||||
}
|
||||
} />
|
||||
)
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-1 justify-between leading-none",
|
||||
nestLabel ? "items-end" : "items-center"
|
||||
)}>
|
||||
<div className="grid gap-1.5">
|
||||
{nestLabel ? tooltipLabel : null}
|
||||
<span className="text-muted-foreground">
|
||||
{itemConfig?.label || item.name}
|
||||
</span>
|
||||
</div>
|
||||
{item.value && (
|
||||
<span className="text-foreground font-mono font-medium tabular-nums">
|
||||
{item.value.toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ChartLegend = RechartsPrimitive.Legend
|
||||
|
||||
function ChartLegendContent({
|
||||
className,
|
||||
hideIcon = false,
|
||||
payload,
|
||||
verticalAlign = "bottom",
|
||||
nameKey
|
||||
}) {
|
||||
const { config } = useChart()
|
||||
|
||||
if (!payload?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-4",
|
||||
verticalAlign === "top" ? "pb-3" : "pt-3",
|
||||
className
|
||||
)}>
|
||||
{payload.map((item) => {
|
||||
const key = `${nameKey || item.dataKey || "value"}`
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.value}
|
||||
className={cn(
|
||||
"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
|
||||
)}>
|
||||
{itemConfig?.icon && !hideIcon ? (
|
||||
<itemConfig.icon />
|
||||
) : (
|
||||
<div
|
||||
className="h-2 w-2 shrink-0 rounded-[2px]"
|
||||
style={{
|
||||
backgroundColor: item.color,
|
||||
}} />
|
||||
)}
|
||||
{itemConfig?.label}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Helper to extract item config from a payload.
|
||||
function getPayloadConfigFromPayload(
|
||||
config,
|
||||
payload,
|
||||
key
|
||||
) {
|
||||
if (typeof payload !== "object" || payload === null) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
const payloadPayload =
|
||||
"payload" in payload &&
|
||||
typeof payload.payload === "object" &&
|
||||
payload.payload !== null
|
||||
? payload.payload
|
||||
: undefined
|
||||
|
||||
let configLabelKey = key
|
||||
|
||||
if (
|
||||
key in payload &&
|
||||
typeof payload[key] === "string"
|
||||
) {
|
||||
configLabelKey = payload[key]
|
||||
} else if (
|
||||
payloadPayload &&
|
||||
key in payloadPayload &&
|
||||
typeof payloadPayload[key] === "string"
|
||||
) {
|
||||
configLabelKey = payloadPayload[key]
|
||||
}
|
||||
|
||||
return configLabelKey in config
|
||||
? config[configLabelKey]
|
||||
: config[key];
|
||||
}
|
||||
|
||||
export {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
ChartLegend,
|
||||
ChartLegendContent,
|
||||
ChartStyle,
|
||||
}
|
||||
25
src/components/ui/checkbox.jsx
Normal file
25
src/components/ui/checkbox.jsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { Check } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
|
||||
<CheckboxPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
className={cn("flex items-center justify-center text-current")}
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
))
|
||||
Checkbox.displayName = CheckboxPrimitive.Root.displayName
|
||||
|
||||
export { Checkbox }
|
||||
|
||||
21
src/components/ui/collapsible.jsx
Normal file
21
src/components/ui/collapsible.jsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
|
||||
|
||||
function Collapsible({
|
||||
...props
|
||||
}) {
|
||||
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
|
||||
}
|
||||
|
||||
function CollapsibleTrigger({
|
||||
...props
|
||||
}) {
|
||||
return (<CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />);
|
||||
}
|
||||
|
||||
function CollapsibleContent({
|
||||
...props
|
||||
}) {
|
||||
return (<CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />);
|
||||
}
|
||||
|
||||
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|
||||
155
src/components/ui/command.jsx
Normal file
155
src/components/ui/command.jsx
Normal file
@@ -0,0 +1,155 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Command as CommandPrimitive } from "cmdk"
|
||||
import { SearchIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
|
||||
function Command({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<CommandPrimitive
|
||||
data-slot="command"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function CommandDialog({
|
||||
title = "Command Palette",
|
||||
description = "Search for a command to run...",
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<Dialog {...props}>
|
||||
<DialogHeader className="sr-only">
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogContent className="overflow-hidden p-0">
|
||||
<Command
|
||||
className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
|
||||
{children}
|
||||
</Command>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandInput({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="command-input-wrapper"
|
||||
className="flex h-9 items-center gap-2 border-b px-3">
|
||||
<SearchIcon className="size-4 shrink-0 opacity-50" />
|
||||
<CommandPrimitive.Input
|
||||
data-slot="command-input"
|
||||
className={cn(
|
||||
"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandList({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<CommandPrimitive.List
|
||||
data-slot="command-list"
|
||||
className={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function CommandEmpty({
|
||||
...props
|
||||
}) {
|
||||
return (<CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />);
|
||||
}
|
||||
|
||||
function CommandGroup({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<CommandPrimitive.Group
|
||||
data-slot="command-group"
|
||||
className={cn(
|
||||
"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function CommandSeparator({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<CommandPrimitive.Separator
|
||||
data-slot="command-separator"
|
||||
className={cn("bg-border -mx-1 h-px", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function CommandItem({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<CommandPrimitive.Item
|
||||
data-slot="command-item"
|
||||
className={cn(
|
||||
"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function CommandShortcut({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
data-slot="command-shortcut"
|
||||
className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Command,
|
||||
CommandDialog,
|
||||
CommandInput,
|
||||
CommandList,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandItem,
|
||||
CommandShortcut,
|
||||
CommandSeparator,
|
||||
}
|
||||
224
src/components/ui/context-menu.jsx
Normal file
224
src/components/ui/context-menu.jsx
Normal file
@@ -0,0 +1,224 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function ContextMenu({
|
||||
...props
|
||||
}) {
|
||||
return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
|
||||
}
|
||||
|
||||
function ContextMenuTrigger({
|
||||
...props
|
||||
}) {
|
||||
return (<ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />);
|
||||
}
|
||||
|
||||
function ContextMenuGroup({
|
||||
...props
|
||||
}) {
|
||||
return (<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />);
|
||||
}
|
||||
|
||||
function ContextMenuPortal({
|
||||
...props
|
||||
}) {
|
||||
return (<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />);
|
||||
}
|
||||
|
||||
function ContextMenuSub({
|
||||
...props
|
||||
}) {
|
||||
return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
|
||||
}
|
||||
|
||||
function ContextMenuRadioGroup({
|
||||
...props
|
||||
}) {
|
||||
return (<ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />);
|
||||
}
|
||||
|
||||
function ContextMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.SubTrigger
|
||||
data-slot="context-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto" />
|
||||
</ContextMenuPrimitive.SubTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuSubContent({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.SubContent
|
||||
data-slot="context-menu-sub-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuContent({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Portal>
|
||||
<ContextMenuPrimitive.Content
|
||||
data-slot="context-menu-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
</ContextMenuPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Item
|
||||
data-slot="context-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.CheckboxItem
|
||||
data-slot="context-menu-checkbox-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}>
|
||||
<span
|
||||
className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<ContextMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</ContextMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</ContextMenuPrimitive.CheckboxItem>
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.RadioItem
|
||||
data-slot="context-menu-radio-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
<span
|
||||
className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<ContextMenuPrimitive.ItemIndicator>
|
||||
<CircleIcon className="size-2 fill-current" />
|
||||
</ContextMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</ContextMenuPrimitive.RadioItem>
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Label
|
||||
data-slot="context-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Separator
|
||||
data-slot="context-menu-separator"
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function ContextMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
data-slot="context-menu-shortcut"
|
||||
className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
ContextMenu,
|
||||
ContextMenuTrigger,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuCheckboxItem,
|
||||
ContextMenuRadioItem,
|
||||
ContextMenuLabel,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuShortcut,
|
||||
ContextMenuGroup,
|
||||
ContextMenuPortal,
|
||||
ContextMenuSub,
|
||||
ContextMenuSubContent,
|
||||
ContextMenuSubTrigger,
|
||||
ContextMenuRadioGroup,
|
||||
}
|
||||
131
src/components/ui/dialog.jsx
Normal file
131
src/components/ui/dialog.jsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import * as React from "react"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Dialog({
|
||||
...props
|
||||
}) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
|
||||
}
|
||||
|
||||
function DialogTrigger({
|
||||
...props
|
||||
}) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function DialogPortal({
|
||||
...props
|
||||
}) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
|
||||
}
|
||||
|
||||
function DialogClose({
|
||||
...props
|
||||
}) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DialogPrimitive.Overlay
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal data-slot="dialog-portal">
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{children}
|
||||
<DialogPrimitive.Close
|
||||
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
|
||||
<XIcon />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogHeader({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DialogFooter({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DialogTitle({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn("text-lg leading-none font-semibold", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
131
src/components/ui/drawer.jsx
Normal file
131
src/components/ui/drawer.jsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import * as React from "react"
|
||||
import { Drawer as DrawerPrimitive } from "vaul"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Drawer({
|
||||
...props
|
||||
}) {
|
||||
return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
|
||||
}
|
||||
|
||||
function DrawerTrigger({
|
||||
...props
|
||||
}) {
|
||||
return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function DrawerPortal({
|
||||
...props
|
||||
}) {
|
||||
return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
|
||||
}
|
||||
|
||||
function DrawerClose({
|
||||
...props
|
||||
}) {
|
||||
return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
|
||||
}
|
||||
|
||||
function DrawerOverlay({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DrawerPrimitive.Overlay
|
||||
data-slot="drawer-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DrawerPortal data-slot="drawer-portal">
|
||||
<DrawerOverlay />
|
||||
<DrawerPrimitive.Content
|
||||
data-slot="drawer-content"
|
||||
className={cn(
|
||||
"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
|
||||
"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
|
||||
"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
|
||||
"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
|
||||
"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
<div
|
||||
className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
|
||||
{children}
|
||||
</DrawerPrimitive.Content>
|
||||
</DrawerPortal>
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerHeader({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="drawer-header"
|
||||
className={cn("flex flex-col gap-1.5 p-4", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerFooter({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="drawer-footer"
|
||||
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerTitle({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DrawerPrimitive.Title
|
||||
data-slot="drawer-title"
|
||||
className={cn("text-foreground font-semibold", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerDescription({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DrawerPrimitive.Description
|
||||
data-slot="drawer-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Drawer,
|
||||
DrawerPortal,
|
||||
DrawerOverlay,
|
||||
DrawerTrigger,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerHeader,
|
||||
DrawerFooter,
|
||||
DrawerTitle,
|
||||
DrawerDescription,
|
||||
}
|
||||
223
src/components/ui/dropdown-menu.jsx
Normal file
223
src/components/ui/dropdown-menu.jsx
Normal file
@@ -0,0 +1,223 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function DropdownMenu({
|
||||
...props
|
||||
}) {
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({
|
||||
...props
|
||||
}) {
|
||||
return (<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />);
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({
|
||||
...props
|
||||
}) {
|
||||
return (<DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />);
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
className,
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({
|
||||
...props
|
||||
}) {
|
||||
return (<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />);
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}>
|
||||
<span
|
||||
className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({
|
||||
...props
|
||||
}) {
|
||||
return (<DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />);
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
<span
|
||||
className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CircleIcon className="size-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Label
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSub({
|
||||
...props
|
||||
}) {
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto size-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
}
|
||||
143
src/components/ui/form.jsx
Normal file
143
src/components/ui/form.jsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Label } from "@/components/ui/label"
|
||||
|
||||
const Form = FormProvider
|
||||
|
||||
const FormFieldContext = React.createContext({})
|
||||
|
||||
const FormField = (
|
||||
{
|
||||
...props
|
||||
}
|
||||
) => {
|
||||
return (
|
||||
<FormFieldContext.Provider value={{ name: props.name }}>
|
||||
<Controller {...props} />
|
||||
</FormFieldContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
const useFormField = () => {
|
||||
const fieldContext = React.useContext(FormFieldContext)
|
||||
const itemContext = React.useContext(FormItemContext)
|
||||
const { getFieldState } = useFormContext()
|
||||
const formState = useFormState({ name: fieldContext.name })
|
||||
const fieldState = getFieldState(fieldContext.name, formState)
|
||||
|
||||
if (!fieldContext) {
|
||||
throw new Error("useFormField should be used within <FormField>")
|
||||
}
|
||||
|
||||
const { id } = itemContext
|
||||
|
||||
return {
|
||||
id,
|
||||
name: fieldContext.name,
|
||||
formItemId: `${id}-form-item`,
|
||||
formDescriptionId: `${id}-form-item-description`,
|
||||
formMessageId: `${id}-form-item-message`,
|
||||
...fieldState,
|
||||
}
|
||||
}
|
||||
|
||||
const FormItemContext = React.createContext({})
|
||||
|
||||
function FormItem({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
const id = React.useId()
|
||||
|
||||
return (
|
||||
<FormItemContext.Provider value={{ id }}>
|
||||
<div data-slot="form-item" className={cn("grid gap-2", className)} {...props} />
|
||||
</FormItemContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function FormLabel({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
const { error, formItemId } = useFormField()
|
||||
|
||||
return (
|
||||
<Label
|
||||
data-slot="form-label"
|
||||
data-error={!!error}
|
||||
className={cn("data-[error=true]:text-destructive", className)}
|
||||
htmlFor={formItemId}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function FormControl({
|
||||
...props
|
||||
}) {
|
||||
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
|
||||
|
||||
return (
|
||||
<Slot
|
||||
data-slot="form-control"
|
||||
id={formItemId}
|
||||
aria-describedby={
|
||||
!error
|
||||
? `${formDescriptionId}`
|
||||
: `${formDescriptionId} ${formMessageId}`
|
||||
}
|
||||
aria-invalid={!!error}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function FormDescription({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
const { formDescriptionId } = useFormField()
|
||||
|
||||
return (
|
||||
<p
|
||||
data-slot="form-description"
|
||||
id={formDescriptionId}
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function FormMessage({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
const { error, formMessageId } = useFormField()
|
||||
const body = error ? String(error?.message ?? "") : props.children
|
||||
|
||||
if (!body) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<p
|
||||
data-slot="form-message"
|
||||
id={formMessageId}
|
||||
className={cn("text-destructive text-sm", className)}
|
||||
{...props}>
|
||||
{body}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
useFormField,
|
||||
Form,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormMessage,
|
||||
FormField,
|
||||
}
|
||||
39
src/components/ui/hover-card.jsx
Normal file
39
src/components/ui/hover-card.jsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import * as React from "react"
|
||||
import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function HoverCard({
|
||||
...props
|
||||
}) {
|
||||
return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
|
||||
}
|
||||
|
||||
function HoverCardTrigger({
|
||||
...props
|
||||
}) {
|
||||
return (<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />);
|
||||
}
|
||||
|
||||
function HoverCardContent({
|
||||
className,
|
||||
align = "center",
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<HoverCardPrimitive.Portal data-slot="hover-card-portal">
|
||||
<HoverCardPrimitive.Content
|
||||
data-slot="hover-card-content"
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
</HoverCardPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
export { HoverCard, HoverCardTrigger, HoverCardContent }
|
||||
73
src/components/ui/input-otp.jsx
Normal file
73
src/components/ui/input-otp.jsx
Normal file
@@ -0,0 +1,73 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { OTPInput, OTPInputContext } from "input-otp"
|
||||
import { MinusIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function InputOTP({
|
||||
className,
|
||||
containerClassName,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<OTPInput
|
||||
data-slot="input-otp"
|
||||
containerClassName={cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName)}
|
||||
className={cn("disabled:cursor-not-allowed", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function InputOTPGroup({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="input-otp-group"
|
||||
className={cn("flex items-center", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function InputOTPSlot({
|
||||
index,
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
const inputOTPContext = React.useContext(OTPInputContext)
|
||||
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
|
||||
|
||||
return (
|
||||
<div
|
||||
data-slot="input-otp-slot"
|
||||
data-active={isActive}
|
||||
className={cn(
|
||||
"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{char}
|
||||
{hasFakeCaret && (
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
||||
<div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InputOTPSeparator({
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div data-slot="input-otp-separator" role="separator" {...props}>
|
||||
<MinusIcon />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
|
||||
20
src/components/ui/input.jsx
Normal file
20
src/components/ui/input.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import * as React from "react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Input = React.forwardRef(({ className, type, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
Input.displayName = "Input"
|
||||
|
||||
export { Input }
|
||||
|
||||
20
src/components/ui/label.jsx
Normal file
20
src/components/ui/label.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
import { cva } from "class-variance-authority"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const labelVariants = cva(
|
||||
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
)
|
||||
|
||||
const Label = React.forwardRef(({ className, ...props }, ref) => (
|
||||
<LabelPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(labelVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Label.displayName = LabelPrimitive.Root.displayName
|
||||
|
||||
export { Label }
|
||||
|
||||
250
src/components/ui/menubar.jsx
Normal file
250
src/components/ui/menubar.jsx
Normal file
@@ -0,0 +1,250 @@
|
||||
import * as React from "react"
|
||||
import * as MenubarPrimitive from "@radix-ui/react-menubar"
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Menubar({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<MenubarPrimitive.Root
|
||||
data-slot="menubar"
|
||||
className={cn(
|
||||
"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarMenu({
|
||||
...props
|
||||
}) {
|
||||
return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
|
||||
}
|
||||
|
||||
function MenubarGroup({
|
||||
...props
|
||||
}) {
|
||||
return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
|
||||
}
|
||||
|
||||
function MenubarPortal({
|
||||
...props
|
||||
}) {
|
||||
return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
|
||||
}
|
||||
|
||||
function MenubarRadioGroup({
|
||||
...props
|
||||
}) {
|
||||
return (<MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />);
|
||||
}
|
||||
|
||||
function MenubarTrigger({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<MenubarPrimitive.Trigger
|
||||
data-slot="menubar-trigger"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarContent({
|
||||
className,
|
||||
align = "start",
|
||||
alignOffset = -4,
|
||||
sideOffset = 8,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<MenubarPortal>
|
||||
<MenubarPrimitive.Content
|
||||
data-slot="menubar-content"
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
</MenubarPortal>
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<MenubarPrimitive.Item
|
||||
data-slot="menubar-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<MenubarPrimitive.CheckboxItem
|
||||
data-slot="menubar-checkbox-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}>
|
||||
<span
|
||||
className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<MenubarPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</MenubarPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenubarPrimitive.CheckboxItem>
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarRadioItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<MenubarPrimitive.RadioItem
|
||||
data-slot="menubar-radio-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
<span
|
||||
className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<MenubarPrimitive.ItemIndicator>
|
||||
<CircleIcon className="size-2 fill-current" />
|
||||
</MenubarPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenubarPrimitive.RadioItem>
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<MenubarPrimitive.Label
|
||||
data-slot="menubar-label"
|
||||
data-inset={inset}
|
||||
className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarSeparator({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<MenubarPrimitive.Separator
|
||||
data-slot="menubar-separator"
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarShortcut({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
data-slot="menubar-shortcut"
|
||||
className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarSub({
|
||||
...props
|
||||
}) {
|
||||
return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
|
||||
}
|
||||
|
||||
function MenubarSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<MenubarPrimitive.SubTrigger
|
||||
data-slot="menubar-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto h-4 w-4" />
|
||||
</MenubarPrimitive.SubTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
function MenubarSubContent({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<MenubarPrimitive.SubContent
|
||||
data-slot="menubar-sub-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Menubar,
|
||||
MenubarPortal,
|
||||
MenubarMenu,
|
||||
MenubarTrigger,
|
||||
MenubarContent,
|
||||
MenubarGroup,
|
||||
MenubarSeparator,
|
||||
MenubarLabel,
|
||||
MenubarItem,
|
||||
MenubarShortcut,
|
||||
MenubarCheckboxItem,
|
||||
MenubarRadioGroup,
|
||||
MenubarRadioItem,
|
||||
MenubarSub,
|
||||
MenubarSubTrigger,
|
||||
MenubarSubContent,
|
||||
}
|
||||
152
src/components/ui/navigation-menu.jsx
Normal file
152
src/components/ui/navigation-menu.jsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import * as React from "react"
|
||||
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
|
||||
import { cva } from "class-variance-authority"
|
||||
import { ChevronDownIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function NavigationMenu({
|
||||
className,
|
||||
children,
|
||||
viewport = true,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Root
|
||||
data-slot="navigation-menu"
|
||||
data-viewport={viewport}
|
||||
className={cn(
|
||||
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{children}
|
||||
{viewport && <NavigationMenuViewport />}
|
||||
</NavigationMenuPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuList({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.List
|
||||
data-slot="navigation-menu-list"
|
||||
className={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuItem({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Item
|
||||
data-slot="navigation-menu-item"
|
||||
className={cn("relative", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
const navigationMenuTriggerStyle = cva(
|
||||
"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
|
||||
)
|
||||
|
||||
function NavigationMenuTrigger({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Trigger
|
||||
data-slot="navigation-menu-trigger"
|
||||
className={cn(navigationMenuTriggerStyle(), "group", className)}
|
||||
{...props}>
|
||||
{children}{" "}
|
||||
<ChevronDownIcon
|
||||
className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
|
||||
aria-hidden="true" />
|
||||
</NavigationMenuPrimitive.Trigger>
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuContent({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Content
|
||||
data-slot="navigation-menu-content"
|
||||
className={cn(
|
||||
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
|
||||
"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuViewport({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={cn("absolute top-full left-0 isolate z-50 flex justify-center")}>
|
||||
<NavigationMenuPrimitive.Viewport
|
||||
data-slot="navigation-menu-viewport"
|
||||
className={cn(
|
||||
"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuLink({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Link
|
||||
data-slot="navigation-menu-link"
|
||||
className={cn(
|
||||
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuIndicator({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Indicator
|
||||
data-slot="navigation-menu-indicator"
|
||||
className={cn(
|
||||
"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
<div
|
||||
className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
|
||||
</NavigationMenuPrimitive.Indicator>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
NavigationMenu,
|
||||
NavigationMenuList,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuTrigger,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuIndicator,
|
||||
NavigationMenuViewport,
|
||||
navigationMenuTriggerStyle,
|
||||
}
|
||||
118
src/components/ui/pagination.jsx
Normal file
118
src/components/ui/pagination.jsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import * as React from "react"
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
MoreHorizontalIcon,
|
||||
} from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
|
||||
function Pagination({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-label="pagination"
|
||||
data-slot="pagination"
|
||||
className={cn("mx-auto flex w-full justify-center", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function PaginationContent({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="pagination-content"
|
||||
className={cn("flex flex-row items-center gap-1", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function PaginationItem({
|
||||
...props
|
||||
}) {
|
||||
return <li data-slot="pagination-item" {...props} />;
|
||||
}
|
||||
|
||||
function PaginationLink({
|
||||
className,
|
||||
isActive,
|
||||
size = "icon",
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<a
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
data-slot="pagination-link"
|
||||
data-active={isActive}
|
||||
className={cn(buttonVariants({
|
||||
variant: isActive ? "outline" : "ghost",
|
||||
size,
|
||||
}), className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function PaginationPrevious({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<PaginationLink
|
||||
aria-label="Go to previous page"
|
||||
size="default"
|
||||
className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
|
||||
{...props}>
|
||||
<ChevronLeftIcon />
|
||||
<span className="hidden sm:block">Previous</span>
|
||||
</PaginationLink>
|
||||
);
|
||||
}
|
||||
|
||||
function PaginationNext({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<PaginationLink
|
||||
aria-label="Go to next page"
|
||||
size="default"
|
||||
className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
|
||||
{...props}>
|
||||
<span className="hidden sm:block">Next</span>
|
||||
<ChevronRightIcon />
|
||||
</PaginationLink>
|
||||
);
|
||||
}
|
||||
|
||||
function PaginationEllipsis({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
aria-hidden
|
||||
data-slot="pagination-ellipsis"
|
||||
className={cn("flex size-9 items-center justify-center", className)}
|
||||
{...props}>
|
||||
<MoreHorizontalIcon className="size-4" />
|
||||
<span className="sr-only">More pages</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationLink,
|
||||
PaginationItem,
|
||||
PaginationPrevious,
|
||||
PaginationNext,
|
||||
PaginationEllipsis,
|
||||
}
|
||||
47
src/components/ui/popover.jsx
Normal file
47
src/components/ui/popover.jsx
Normal file
@@ -0,0 +1,47 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Popover({
|
||||
...props
|
||||
}) {
|
||||
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
|
||||
}
|
||||
|
||||
function PopoverTrigger({
|
||||
...props
|
||||
}) {
|
||||
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function PopoverContent({
|
||||
className,
|
||||
align = "center",
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
data-slot="popover-content"
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
</PopoverPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
function PopoverAnchor({
|
||||
...props
|
||||
}) {
|
||||
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
|
||||
}
|
||||
|
||||
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
|
||||
27
src/components/ui/progress.jsx
Normal file
27
src/components/ui/progress.jsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import * as React from "react"
|
||||
import * as ProgressPrimitive from "@radix-ui/react-progress"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Progress({
|
||||
className,
|
||||
value,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ProgressPrimitive.Root
|
||||
data-slot="progress"
|
||||
className={cn(
|
||||
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
<ProgressPrimitive.Indicator
|
||||
data-slot="progress-indicator"
|
||||
className="bg-primary h-full w-full flex-1 transition-all"
|
||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }} />
|
||||
</ProgressPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
export { Progress }
|
||||
43
src/components/ui/radio-group.jsx
Normal file
43
src/components/ui/radio-group.jsx
Normal file
@@ -0,0 +1,43 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
|
||||
import { CircleIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function RadioGroup({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<RadioGroupPrimitive.Root
|
||||
data-slot="radio-group"
|
||||
className={cn("grid gap-3", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function RadioGroupItem({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<RadioGroupPrimitive.Item
|
||||
data-slot="radio-group-item"
|
||||
className={cn(
|
||||
"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
<RadioGroupPrimitive.Indicator
|
||||
data-slot="radio-group-indicator"
|
||||
className="relative flex items-center justify-center">
|
||||
<CircleIcon
|
||||
className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
|
||||
</RadioGroupPrimitive.Indicator>
|
||||
</RadioGroupPrimitive.Item>
|
||||
);
|
||||
}
|
||||
|
||||
export { RadioGroup, RadioGroupItem }
|
||||
51
src/components/ui/resizable.jsx
Normal file
51
src/components/ui/resizable.jsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import * as React from "react"
|
||||
import { GripVerticalIcon } from "lucide-react"
|
||||
import * as ResizablePrimitive from "react-resizable-panels"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function ResizablePanelGroup({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ResizablePrimitive.PanelGroup
|
||||
data-slot="resizable-panel-group"
|
||||
className={cn(
|
||||
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function ResizablePanel({
|
||||
...props
|
||||
}) {
|
||||
return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
|
||||
}
|
||||
|
||||
function ResizableHandle({
|
||||
withHandle,
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ResizablePrimitive.PanelResizeHandle
|
||||
data-slot="resizable-handle"
|
||||
className={cn(
|
||||
"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{withHandle && (
|
||||
<div
|
||||
className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
|
||||
<GripVerticalIcon className="size-2.5" />
|
||||
</div>
|
||||
)}
|
||||
</ResizablePrimitive.PanelResizeHandle>
|
||||
);
|
||||
}
|
||||
|
||||
export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
|
||||
51
src/components/ui/scroll-area.jsx
Normal file
51
src/components/ui/scroll-area.jsx
Normal file
@@ -0,0 +1,51 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function ScrollArea({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
|
||||
<ScrollAreaPrimitive.Viewport
|
||||
data-slot="scroll-area-viewport"
|
||||
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1">
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function ScrollBar({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||
data-slot="scroll-area-scrollbar"
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none p-px transition-colors select-none",
|
||||
orientation === "vertical" &&
|
||||
"h-full w-2.5 border-l border-l-transparent",
|
||||
orientation === "horizontal" &&
|
||||
"h-2.5 flex-col border-t border-t-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
<ScrollAreaPrimitive.ScrollAreaThumb
|
||||
data-slot="scroll-area-thumb"
|
||||
className="bg-border relative flex-1 rounded-full" />
|
||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
);
|
||||
}
|
||||
|
||||
export { ScrollArea, ScrollBar }
|
||||
136
src/components/ui/select.jsx
Normal file
136
src/components/ui/select.jsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import * as React from "react"
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
import { Check, ChevronDown, ChevronUp } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Select = SelectPrimitive.Root
|
||||
|
||||
const SelectGroup = SelectPrimitive.Group
|
||||
|
||||
const SelectValue = SelectPrimitive.Value
|
||||
|
||||
const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDown className="h-4 w-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
))
|
||||
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
|
||||
|
||||
const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
))
|
||||
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
|
||||
|
||||
const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
))
|
||||
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
|
||||
|
||||
const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
))
|
||||
SelectContent.displayName = SelectPrimitive.Content.displayName
|
||||
|
||||
const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SelectLabel.displayName = SelectPrimitive.Label.displayName
|
||||
|
||||
const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
))
|
||||
SelectItem.displayName = SelectPrimitive.Item.displayName
|
||||
|
||||
const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectGroup,
|
||||
SelectValue,
|
||||
SelectTrigger,
|
||||
SelectContent,
|
||||
SelectLabel,
|
||||
SelectItem,
|
||||
SelectSeparator,
|
||||
SelectScrollUpButton,
|
||||
SelectScrollDownButton,
|
||||
}
|
||||
|
||||
27
src/components/ui/separator.jsx
Normal file
27
src/components/ui/separator.jsx
Normal file
@@ -0,0 +1,27 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
decorative = true,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<SeparatorPrimitive.Root
|
||||
data-slot="separator-root"
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
138
src/components/ui/sheet.jsx
Normal file
138
src/components/ui/sheet.jsx
Normal file
@@ -0,0 +1,138 @@
|
||||
import * as React from "react"
|
||||
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Sheet({
|
||||
...props
|
||||
}) {
|
||||
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
|
||||
}
|
||||
|
||||
function SheetTrigger({
|
||||
...props
|
||||
}) {
|
||||
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function SheetClose({
|
||||
...props
|
||||
}) {
|
||||
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
|
||||
}
|
||||
|
||||
function SheetPortal({
|
||||
...props
|
||||
}) {
|
||||
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
|
||||
}
|
||||
|
||||
function SheetOverlay({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<SheetPrimitive.Overlay
|
||||
data-slot="sheet-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SheetContent({
|
||||
className,
|
||||
children,
|
||||
side = "right",
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
data-slot="sheet-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||
side === "right" &&
|
||||
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
||||
side === "left" &&
|
||||
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
||||
side === "top" &&
|
||||
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
|
||||
side === "bottom" &&
|
||||
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{children}
|
||||
<SheetPrimitive.Close
|
||||
className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
||||
<XIcon className="size-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
);
|
||||
}
|
||||
|
||||
function SheetHeader({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-header"
|
||||
className={cn("flex flex-col gap-1.5 p-4", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SheetFooter({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-footer"
|
||||
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SheetTitle({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<SheetPrimitive.Title
|
||||
data-slot="sheet-title"
|
||||
className={cn("text-foreground font-semibold", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SheetDescription({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<SheetPrimitive.Description
|
||||
data-slot="sheet-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
}
|
||||
682
src/components/ui/sidebar.jsx
Normal file
682
src/components/ui/sidebar.jsx
Normal file
@@ -0,0 +1,682 @@
|
||||
"use client";
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva } from "class-variance-authority";
|
||||
import { PanelLeftIcon } from "lucide-react"
|
||||
|
||||
import { useIsMobile } from "@/hooks/use-mobile"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip"
|
||||
|
||||
const SIDEBAR_COOKIE_NAME = "sidebar_state"
|
||||
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
||||
const SIDEBAR_WIDTH = "16rem"
|
||||
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
||||
const SIDEBAR_WIDTH_ICON = "3rem"
|
||||
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
|
||||
|
||||
const SidebarContext = React.createContext(null)
|
||||
|
||||
function useSidebar() {
|
||||
const context = React.useContext(SidebarContext)
|
||||
if (!context) {
|
||||
throw new Error("useSidebar must be used within a SidebarProvider.")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
function SidebarProvider({
|
||||
defaultOpen = true,
|
||||
open: openProp,
|
||||
onOpenChange: setOpenProp,
|
||||
className,
|
||||
style,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
const isMobile = useIsMobile()
|
||||
const [openMobile, setOpenMobile] = React.useState(false)
|
||||
|
||||
// This is the internal state of the sidebar.
|
||||
// We use openProp and setOpenProp for control from outside the component.
|
||||
const [_open, _setOpen] = React.useState(defaultOpen)
|
||||
const open = openProp ?? _open
|
||||
const setOpen = React.useCallback((value) => {
|
||||
const openState = typeof value === "function" ? value(open) : value
|
||||
if (setOpenProp) {
|
||||
setOpenProp(openState)
|
||||
} else {
|
||||
_setOpen(openState)
|
||||
}
|
||||
|
||||
// This sets the cookie to keep the sidebar state.
|
||||
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
|
||||
}, [setOpenProp, open])
|
||||
|
||||
// Helper to toggle the sidebar.
|
||||
const toggleSidebar = React.useCallback(() => {
|
||||
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
|
||||
}, [isMobile, setOpen, setOpenMobile])
|
||||
|
||||
// Adds a keyboard shortcut to toggle the sidebar.
|
||||
React.useEffect(() => {
|
||||
const handleKeyDown = (event) => {
|
||||
if (
|
||||
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
|
||||
(event.metaKey || event.ctrlKey)
|
||||
) {
|
||||
event.preventDefault()
|
||||
toggleSidebar()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown)
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}, [toggleSidebar])
|
||||
|
||||
// We add a state so that we can do data-state="expanded" or "collapsed".
|
||||
// This makes it easier to style the sidebar with Tailwind classes.
|
||||
const state = open ? "expanded" : "collapsed"
|
||||
|
||||
const contextValue = React.useMemo(() => ({
|
||||
state,
|
||||
open,
|
||||
setOpen,
|
||||
isMobile,
|
||||
openMobile,
|
||||
setOpenMobile,
|
||||
toggleSidebar,
|
||||
}), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar])
|
||||
|
||||
return (
|
||||
<SidebarContext.Provider value={contextValue}>
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<div
|
||||
data-slot="sidebar-wrapper"
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH,
|
||||
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
||||
...style
|
||||
}
|
||||
}
|
||||
className={cn(
|
||||
"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{children}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</SidebarContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function Sidebar({
|
||||
side = "left",
|
||||
variant = "sidebar",
|
||||
collapsible = "offcanvas",
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
|
||||
|
||||
if (collapsible === "none") {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar"
|
||||
className={cn(
|
||||
"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
||||
<SheetContent
|
||||
data-sidebar="sidebar"
|
||||
data-slot="sidebar"
|
||||
data-mobile="true"
|
||||
className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH_MOBILE
|
||||
}
|
||||
}
|
||||
side={side}>
|
||||
<SheetHeader className="sr-only">
|
||||
<SheetTitle>Sidebar</SheetTitle>
|
||||
<SheetDescription>Displays the mobile sidebar.</SheetDescription>
|
||||
</SheetHeader>
|
||||
<div className="flex h-full w-full flex-col">{children}</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group peer text-sidebar-foreground hidden md:block"
|
||||
data-state={state}
|
||||
data-collapsible={state === "collapsed" ? collapsible : ""}
|
||||
data-variant={variant}
|
||||
data-side={side}
|
||||
data-slot="sidebar">
|
||||
{/* This is what handles the sidebar gap on desktop */}
|
||||
<div
|
||||
data-slot="sidebar-gap"
|
||||
className={cn(
|
||||
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
|
||||
"group-data-[collapsible=offcanvas]:w-0",
|
||||
"group-data-[side=right]:rotate-180",
|
||||
variant === "floating" || variant === "inset"
|
||||
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
|
||||
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
|
||||
)} />
|
||||
<div
|
||||
data-slot="sidebar-container"
|
||||
className={cn(
|
||||
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
|
||||
side === "left"
|
||||
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
||||
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
||||
// Adjust the padding for floating and inset variants.
|
||||
variant === "floating" || variant === "inset"
|
||||
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
|
||||
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
<div
|
||||
data-sidebar="sidebar"
|
||||
data-slot="sidebar-inner"
|
||||
className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarTrigger({
|
||||
className,
|
||||
onClick,
|
||||
...props
|
||||
}) {
|
||||
const { toggleSidebar } = useSidebar()
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-sidebar="trigger"
|
||||
data-slot="sidebar-trigger"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={cn("size-7", className)}
|
||||
onClick={(event) => {
|
||||
onClick?.(event)
|
||||
toggleSidebar()
|
||||
}}
|
||||
{...props}>
|
||||
<PanelLeftIcon />
|
||||
<span className="sr-only">Toggle Sidebar</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarRail({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
const { toggleSidebar } = useSidebar()
|
||||
|
||||
return (
|
||||
<button
|
||||
data-sidebar="rail"
|
||||
data-slot="sidebar-rail"
|
||||
aria-label="Toggle Sidebar"
|
||||
tabIndex={-1}
|
||||
onClick={toggleSidebar}
|
||||
title="Toggle Sidebar"
|
||||
className={cn(
|
||||
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
|
||||
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
||||
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
||||
"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
|
||||
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
||||
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarInset({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<main
|
||||
data-slot="sidebar-inset"
|
||||
className={cn(
|
||||
"bg-background relative flex w-full flex-1 flex-col",
|
||||
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarInput({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<Input
|
||||
data-slot="sidebar-input"
|
||||
data-sidebar="input"
|
||||
className={cn("bg-background h-8 w-full shadow-none", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarHeader({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-header"
|
||||
data-sidebar="header"
|
||||
className={cn("flex flex-col gap-2 p-2", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarFooter({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-footer"
|
||||
data-sidebar="footer"
|
||||
className={cn("flex flex-col gap-2 p-2", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarSeparator({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<Separator
|
||||
data-slot="sidebar-separator"
|
||||
data-sidebar="separator"
|
||||
className={cn("bg-sidebar-border mx-2 w-auto", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarContent({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-content"
|
||||
data-sidebar="content"
|
||||
className={cn(
|
||||
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarGroup({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-group"
|
||||
data-sidebar="group"
|
||||
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarGroupLabel({
|
||||
className,
|
||||
asChild = false,
|
||||
...props
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "div"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="sidebar-group-label"
|
||||
data-sidebar="group-label"
|
||||
className={cn(
|
||||
"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarGroupAction({
|
||||
className,
|
||||
asChild = false,
|
||||
...props
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="sidebar-group-action"
|
||||
data-sidebar="group-action"
|
||||
className={cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
// Increases the hit area of the button on mobile.
|
||||
"after:absolute after:-inset-2 md:after:hidden",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarGroupContent({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-group-content"
|
||||
data-sidebar="group-content"
|
||||
className={cn("w-full text-sm", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarMenu({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="sidebar-menu"
|
||||
data-sidebar="menu"
|
||||
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarMenuItem({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<li
|
||||
data-slot="sidebar-menu-item"
|
||||
data-sidebar="menu-item"
|
||||
className={cn("group/menu-item relative", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
const sidebarMenuButtonVariants = cva(
|
||||
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
outline:
|
||||
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
|
||||
},
|
||||
size: {
|
||||
default: "h-8 text-sm",
|
||||
sm: "h-7 text-xs",
|
||||
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function SidebarMenuButton({
|
||||
asChild = false,
|
||||
isActive = false,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
tooltip,
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
const { isMobile, state } = useSidebar()
|
||||
|
||||
const button = (
|
||||
<Comp
|
||||
data-slot="sidebar-menu-button"
|
||||
data-sidebar="menu-button"
|
||||
data-size={size}
|
||||
data-active={isActive}
|
||||
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
|
||||
{...props} />
|
||||
)
|
||||
|
||||
if (!tooltip) {
|
||||
return button
|
||||
}
|
||||
|
||||
if (typeof tooltip === "string") {
|
||||
tooltip = {
|
||||
children: tooltip,
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="right"
|
||||
align="center"
|
||||
hidden={state !== "collapsed" || isMobile}
|
||||
{...tooltip} />
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarMenuAction({
|
||||
className,
|
||||
asChild = false,
|
||||
showOnHover = false,
|
||||
...props
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="sidebar-menu-action"
|
||||
data-sidebar="menu-action"
|
||||
className={cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
// Increases the hit area of the button on mobile.
|
||||
"after:absolute after:-inset-2 md:after:hidden",
|
||||
"peer-data-[size=sm]/menu-button:top-1",
|
||||
"peer-data-[size=default]/menu-button:top-1.5",
|
||||
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
showOnHover &&
|
||||
"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarMenuBadge({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-menu-badge"
|
||||
data-sidebar="menu-badge"
|
||||
className={cn(
|
||||
"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
|
||||
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
|
||||
"peer-data-[size=sm]/menu-button:top-1",
|
||||
"peer-data-[size=default]/menu-button:top-1.5",
|
||||
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarMenuSkeleton({
|
||||
className,
|
||||
showIcon = false,
|
||||
...props
|
||||
}) {
|
||||
// Random width between 50 to 90%.
|
||||
const width = React.useMemo(() => {
|
||||
return `${Math.floor(Math.random() * 40) + 50}%`;
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-menu-skeleton"
|
||||
data-sidebar="menu-skeleton"
|
||||
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
|
||||
{...props}>
|
||||
{showIcon && (
|
||||
<Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
|
||||
)}
|
||||
<Skeleton
|
||||
className="h-4 max-w-(--skeleton-width) flex-1"
|
||||
data-sidebar="menu-skeleton-text"
|
||||
style={
|
||||
{
|
||||
"--skeleton-width": width
|
||||
}
|
||||
} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarMenuSub({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="sidebar-menu-sub"
|
||||
data-sidebar="menu-sub"
|
||||
className={cn(
|
||||
"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarMenuSubItem({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<li
|
||||
data-slot="sidebar-menu-sub-item"
|
||||
data-sidebar="menu-sub-item"
|
||||
className={cn("group/menu-sub-item relative", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarMenuSubButton({
|
||||
asChild = false,
|
||||
size = "md",
|
||||
isActive = false,
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "a"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="sidebar-menu-sub-button"
|
||||
data-sidebar="menu-sub-button"
|
||||
data-size={size}
|
||||
data-active={isActive}
|
||||
className={cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
|
||||
size === "sm" && "text-xs",
|
||||
size === "md" && "text-sm",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupAction,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarInput,
|
||||
SidebarInset,
|
||||
SidebarMenu,
|
||||
SidebarMenuAction,
|
||||
SidebarMenuBadge,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSkeleton,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
SidebarProvider,
|
||||
SidebarRail,
|
||||
SidebarSeparator,
|
||||
SidebarTrigger,
|
||||
useSidebar,
|
||||
}
|
||||
15
src/components/ui/skeleton.jsx
Normal file
15
src/components/ui/skeleton.jsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Skeleton({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="skeleton"
|
||||
className={cn("bg-accent animate-pulse rounded-md", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
56
src/components/ui/slider.jsx
Normal file
56
src/components/ui/slider.jsx
Normal file
@@ -0,0 +1,56 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SliderPrimitive from "@radix-ui/react-slider"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Slider({
|
||||
className,
|
||||
defaultValue,
|
||||
value,
|
||||
min = 0,
|
||||
max = 100,
|
||||
...props
|
||||
}) {
|
||||
const _values = React.useMemo(() =>
|
||||
Array.isArray(value)
|
||||
? value
|
||||
: Array.isArray(defaultValue)
|
||||
? defaultValue
|
||||
: [min, max], [value, defaultValue, min, max])
|
||||
|
||||
return (
|
||||
<SliderPrimitive.Root
|
||||
data-slot="slider"
|
||||
defaultValue={defaultValue}
|
||||
value={value}
|
||||
min={min}
|
||||
max={max}
|
||||
className={cn(
|
||||
"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
<SliderPrimitive.Track
|
||||
data-slot="slider-track"
|
||||
className={cn(
|
||||
"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
|
||||
)}>
|
||||
<SliderPrimitive.Range
|
||||
data-slot="slider-range"
|
||||
className={cn(
|
||||
"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
|
||||
)} />
|
||||
</SliderPrimitive.Track>
|
||||
{Array.from({ length: _values.length }, (_, index) => (
|
||||
<SliderPrimitive.Thumb
|
||||
data-slot="slider-thumb"
|
||||
key={index}
|
||||
className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
|
||||
))}
|
||||
</SliderPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
export { Slider }
|
||||
24
src/components/ui/sonner.jsx
Normal file
24
src/components/ui/sonner.jsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import { useTheme } from "next-themes"
|
||||
import { Toaster as Sonner } from "sonner";
|
||||
|
||||
const Toaster = ({
|
||||
...props
|
||||
}) => {
|
||||
const { theme = "system" } = useTheme()
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme}
|
||||
className="toaster group"
|
||||
style={
|
||||
{
|
||||
"--normal-bg": "var(--popover)",
|
||||
"--normal-text": "var(--popover-foreground)",
|
||||
"--normal-border": "var(--border)"
|
||||
}
|
||||
}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export { Toaster }
|
||||
29
src/components/ui/switch.jsx
Normal file
29
src/components/ui/switch.jsx
Normal file
@@ -0,0 +1,29 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SwitchPrimitive from "@radix-ui/react-switch"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Switch({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<SwitchPrimitive.Root
|
||||
data-slot="switch"
|
||||
className={cn(
|
||||
"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
<SwitchPrimitive.Thumb
|
||||
data-slot="switch-thumb"
|
||||
className={cn(
|
||||
"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
|
||||
)} />
|
||||
</SwitchPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
export { Switch }
|
||||
121
src/components/ui/table.jsx
Normal file
121
src/components/ui/table.jsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Table({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div data-slot="table-container" className="relative w-full overflow-x-auto">
|
||||
<table
|
||||
data-slot="table"
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TableHeader({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<thead
|
||||
data-slot="table-header"
|
||||
className={cn("[&_tr]:border-b", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function TableBody({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<tbody
|
||||
data-slot="table-body"
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function TableFooter({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<tfoot
|
||||
data-slot="table-footer"
|
||||
className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function TableRow({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<tr
|
||||
data-slot="table-row"
|
||||
className={cn(
|
||||
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function TableHead({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<th
|
||||
data-slot="table-head"
|
||||
className={cn(
|
||||
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function TableCell({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<td
|
||||
data-slot="table-cell"
|
||||
className={cn(
|
||||
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function TableCaption({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<caption
|
||||
data-slot="table-caption"
|
||||
className={cn("text-muted-foreground mt-4 text-sm", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
}
|
||||
62
src/components/ui/tabs.jsx
Normal file
62
src/components/ui/tabs.jsx
Normal file
@@ -0,0 +1,62 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
className={cn("flex flex-col gap-2", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
className={cn(
|
||||
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function TabsTrigger({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<TabsPrimitive.Trigger
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function TabsContent({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<TabsPrimitive.Content
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 outline-none", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||
19
src/components/ui/textarea.jsx
Normal file
19
src/components/ui/textarea.jsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import * as React from "react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Textarea = React.forwardRef(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
Textarea.displayName = "Textarea"
|
||||
|
||||
export { Textarea }
|
||||
|
||||
61
src/components/ui/toggle-group.jsx
Normal file
61
src/components/ui/toggle-group.jsx
Normal file
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
import * as React from "react"
|
||||
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { toggleVariants } from "@/components/ui/toggle"
|
||||
|
||||
const ToggleGroupContext = React.createContext({
|
||||
size: "default",
|
||||
variant: "default",
|
||||
})
|
||||
|
||||
function ToggleGroup({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<ToggleGroupPrimitive.Root
|
||||
data-slot="toggle-group"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
<ToggleGroupContext.Provider value={{ variant, size }}>
|
||||
{children}
|
||||
</ToggleGroupContext.Provider>
|
||||
</ToggleGroupPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function ToggleGroupItem({
|
||||
className,
|
||||
children,
|
||||
variant,
|
||||
size,
|
||||
...props
|
||||
}) {
|
||||
const context = React.useContext(ToggleGroupContext)
|
||||
|
||||
return (
|
||||
<ToggleGroupPrimitive.Item
|
||||
data-slot="toggle-group-item"
|
||||
data-variant={context.variant || variant}
|
||||
data-size={context.size || size}
|
||||
className={cn(toggleVariants({
|
||||
variant: context.variant || variant,
|
||||
size: context.size || size,
|
||||
}), "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l", className)}
|
||||
{...props}>
|
||||
{children}
|
||||
</ToggleGroupPrimitive.Item>
|
||||
);
|
||||
}
|
||||
|
||||
export { ToggleGroup, ToggleGroupItem }
|
||||
43
src/components/ui/toggle.jsx
Normal file
43
src/components/ui/toggle.jsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import * as React from "react"
|
||||
import * as TogglePrimitive from "@radix-ui/react-toggle"
|
||||
import { cva } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const toggleVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
outline:
|
||||
"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-2 min-w-9",
|
||||
sm: "h-8 px-1.5 min-w-8",
|
||||
lg: "h-10 px-2.5 min-w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Toggle({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<TogglePrimitive.Root
|
||||
data-slot="toggle"
|
||||
className={cn(toggleVariants({ variant, size, className }))}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export { Toggle, toggleVariants }
|
||||
53
src/components/ui/tooltip.jsx
Normal file
53
src/components/ui/tooltip.jsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import * as React from "react"
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function TooltipProvider({
|
||||
delayDuration = 0,
|
||||
...props
|
||||
}) {
|
||||
return (<TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />);
|
||||
}
|
||||
|
||||
function Tooltip({
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function TooltipTrigger({
|
||||
...props
|
||||
}) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
className,
|
||||
sideOffset = 0,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Content
|
||||
data-slot="tooltip-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{children}
|
||||
<TooltipPrimitive.Arrow
|
||||
className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
|
||||
</TooltipPrimitive.Content>
|
||||
</TooltipPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
Reference in New Issue
Block a user