ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-07 18:23:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

VITE_TABS env variable needed for tabs

Browse Source
This commit is contained in:
Oliver Bryan
2026-02-07 17:26:32 +00:00
parent 29628591a0
commit ca39fffdc5
1 changed files with 51 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/App.tsx
View File

@@ -43,6 +43,7 @@ export default App;
function Home() { function Home() {
const isDevMode = import.meta.env.VITE_PUBLIC_DEV === "1"; const isDevMode = import.meta.env.VITE_PUBLIC_DEV === "1";
const isTabsEnabled = import.meta.env.VITE_TABS === "1";
const navigate = useNavigate(); const navigate = useNavigate();
const [asciiArt, setAsciiArt] = useState(""); const [asciiArt, setAsciiArt] = useState("");
const [activeTab, setActiveTab] = useState<HomeTab>("work"); const [activeTab, setActiveTab] = useState<HomeTab>("work");
@@ -87,7 +88,7 @@ function Home() {
if (event.defaultPrevented || event.isComposing) return; if (event.defaultPrevented || event.isComposing) return;
if (event.metaKey || event.ctrlKey || event.altKey) return; if (event.metaKey || event.ctrlKey || event.altKey) return;
if (event.key === "Tab") { if (isTabsEnabled && event.key === "Tab") {
event.preventDefault(); event.preventDefault();
setActiveTab((prev) => { setActiveTab((prev) => {
const currentIndex = homeTabs.indexOf(prev); const currentIndex = homeTabs.indexOf(prev);
@@ -197,6 +198,7 @@ function Home() {
Age: <TimeSince date={new Date(2004, 10, 4, 11, 47, 0)} /> Age: <TimeSince date={new Date(2004, 10, 4, 11, 47, 0)} />
</div> </div>
</div> </div>
{isTabsEnabled ? (
<Tabs <Tabs
value={activeTab} value={activeTab}
onValueChange={(value) => setActiveTab(value as HomeTab)} onValueChange={(value) => setActiveTab(value as HomeTab)}
@@ -216,7 +218,7 @@ function Home() {
Travel Travel
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
<div className="-mt-[1.5px] p-2 border"> <div className="-mt-[1.5px] border p-2">
<TabsContent value={homeTabs[0]}> <TabsContent value={homeTabs[0]}>
<div className="grid grid-cols-1 gap-2 md:grid-cols-2"> <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
{visibleProjects.map((project, index) => ( {visibleProjects.map((project, index) => (
@@ -230,9 +232,22 @@ function Home() {
))} ))}
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value={homeTabs[1]}>test </TabsContent> <TabsContent value={homeTabs[1]} />
</div> </div>
</Tabs> </Tabs>
) : (
<div className="w-full max-w-5xl grid grid-cols-1 gap-2 md:grid-cols-2">
{visibleProjects.map((project, index) => (
<ProjectListItem
key={project.metadata.slug}
metadata={project.metadata}
isDevMode={isDevMode}
isActive={activeIndex !== null && index === activeIndex}
enableHover={hasPointerInteraction}
/>
))}
</div>
)}
<div className="w-full max-w-5xl grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] items-center gap-3 md:gap-4"> <div className="w-full max-w-5xl grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] items-center gap-3 md:gap-4">
<div className="flex items-center gap-6"> <div className="flex items-center gap-6">
<AskAI name="me" inline /> <AskAI name="me" inline />