ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-08 10:43:38 +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

87
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,42 +198,56 @@ 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>
<Tabs {isTabsEnabled ? (
value={activeTab} <Tabs
onValueChange={(value) => setActiveTab(value as HomeTab)} value={activeTab}
className="w-full max-w-5xl gap-0" onValueChange={(value) => setActiveTab(value as HomeTab)}
> className="w-full max-w-5xl gap-0"
<TabsList variant="line" className="h-auto w-full gap-0 p-0"> >
<TabsTrigger <TabsList variant="line" className="h-auto w-full gap-0 p-0">
value={homeTabs[0]} <TabsTrigger
className="border-border -mr-[1px] after:hidden data-[state=active]:text-accent" value={homeTabs[0]}
> className="border-border -mr-[1px] after:hidden data-[state=active]:text-accent"
Work >
</TabsTrigger> Work
<TabsTrigger </TabsTrigger>
value={homeTabs[1]} <TabsTrigger
className="border-border after:hidden data-[state=active]:text-accent" value={homeTabs[1]}
> className="border-border after:hidden data-[state=active]:text-accent"
Travel >
</TabsTrigger> Travel
</TabsList> </TabsTrigger>
<div className="-mt-[1.5px] p-2 border"> </TabsList>
<TabsContent value={homeTabs[0]}> <div className="-mt-[1.5px] border p-2">
<div className="grid grid-cols-1 gap-2 md:grid-cols-2"> <TabsContent value={homeTabs[0]}>
{visibleProjects.map((project, index) => ( <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
<ProjectListItem {visibleProjects.map((project, index) => (
key={project.metadata.slug} <ProjectListItem
metadata={project.metadata} key={project.metadata.slug}
isDevMode={isDevMode} metadata={project.metadata}
isActive={activeIndex !== null && index === activeIndex} isDevMode={isDevMode}
enableHover={hasPointerInteraction} isActive={activeIndex !== null && index === activeIndex}
/> enableHover={hasPointerInteraction}
))} />
</div> ))}
</TabsContent> </div>
<TabsContent value={homeTabs[1]}>test </TabsContent> </TabsContent>
<TabsContent value={homeTabs[1]} />
</div>
</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>
</Tabs> )}
<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 />