Spaces:
Running
Running
File size: 5,511 Bytes
a8d792f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
"use client";
import { Cpu, Mail, Plus, ExternalLink } from "lucide-react";
import { Button } from "@/components/ui/button";
import HudCorners from "@/components/hud-corners";
const supportedHardware = [
{
name: "SO-100",
status: "supported",
description:
"6-DOF robotic arm with gripper, leader/follower configuration",
},
];
export function HardwareSupportSection() {
return (
<div className="font-mono">
<div className="mb-6">
<h2 className="text-2xl font-bold text-primary tracking-wider mb-2 uppercase flex items-center gap-3">
<Cpu className="w-6 h-6" />
Hardware Support
</h2>
<p className="text-sm text-muted-foreground">
{"making sure that robotic ai is accessible to everyone"}
</p>
</div>
<div className="space-y-8">
{/* Currently Supported */}
<HudCorners color="primary" size="sm" layer="front">
<div className="bg-muted/40 dark:bg-black/30 border border-primary/30 p-6 rounded-lg">
<h3 className="text-xl font-bold text-cyan-600 dark:text-accent-cyan tracking-wider uppercase mb-4 flex items-center gap-2">
<Cpu className="w-5 h-5" />
Currently Supported
</h3>
<div className="space-y-4">
{supportedHardware.map((robot, index) => (
<div
key={index}
className="flex items-center justify-between p-4 bg-muted/50 dark:bg-black/20 rounded-lg border border-border dark:border-white/10"
>
<div className="flex-1">
<div className="flex items-center gap-3 mb-2">
<h4 className="font-bold text-primary">{robot.name}</h4>
</div>
<p className="text-muted-foreground text-xs">
{robot.description}
</p>
</div>
{/* Sponsored By Section */}
<div className="flex flex-col items-end gap-2 ml-6">
<span className="text-xs text-muted-foreground uppercase tracking-wider">
Sponsored by
</span>
<a
href="https://partabot.com"
target="_blank"
rel="noopener noreferrer"
className="inline-block hover:opacity-80 transition-opacity"
>
<img
src="partabot-logo.png"
alt="Partabot.com"
width="100"
height="32"
className="h-6 w-auto invert dark:invert-0"
/>
</a>
</div>
</div>
))}
</div>
</div>
</HudCorners>
{/* Add New Hardware */}
<HudCorners color="whiteMuted" size="sm" layer="front">
<div className="bg-muted/40 dark:bg-black/30 border border-muted/30 p-6 rounded-lg">
<h3 className="text-xl font-bold text-cyan-600 dark:text-accent-cyan tracking-wider uppercase mb-4 flex items-center gap-2">
<Plus className="w-5 h-5" />
Add New Hardware Support
</h3>
<div className="space-y-6">
<div>
<p className="text-muted-foreground mb-4">
please provide us with access to different robot hardware, so
we can add them to lerobot.js
</p>
<div className="bg-muted/60 dark:bg-black/40 border border-border dark:border-white/10 rounded-lg p-4 mb-4">
<h4 className="font-bold text-primary mb-2">
How to contribute hardware support:
</h4>
<ul className="text-foreground/80 dark:text-muted-foreground text-sm space-y-1 list-disc list-inside">
<li>Loan or donate hardware for development</li>
<li>Provide technical documentation and APIs</li>
<li>Contribute code for new robot integrations</li>
<li>Help with testing and validation</li>
</ul>
</div>
<div className="flex flex-col sm:flex-row gap-4">
<Button
className="font-mono uppercase flex items-center gap-2"
onClick={() =>
window.open(
"mailto:[email protected]?subject=LeRobot.js Hardware Support",
"_blank"
)
}
>
<Mail className="w-4 h-4" />
Contact Tim
</Button>
<Button
variant="outline"
className="font-mono uppercase flex items-center gap-2 bg-transparent"
onClick={() =>
window.open(
"https://github.com/timpietrusky/lerobot.js",
"_blank"
)
}
>
<ExternalLink className="w-4 h-4" />
GitHub
</Button>
</div>
</div>
</div>
</div>
</HudCorners>
</div>
</div>
);
}
|