roryhealy
/
roryhealy.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify navigation on project page

This commit is contained in:
Rory Healy 2023-10-25 18:41:52 +11:00
parent cddc683ba1
commit ccac77e4c0
Signed by: roryhealy
GPG Key ID: 0A3CBDE9C2AE672F
3 changed files with 21 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
app/projects/page.tsx
View File

@ -2,7 +2,6 @@
import React, { useState } from 'react';
import Image from 'next/image';
import * as RadioGroup from '@radix-ui/react-radio-group';
export default function Projects() {
const [selectedTab, setSelectedTab] = useState(0);
@ -44,6 +43,7 @@ export default function Projects() {
alt='Workout Buddy Front Page'
fill
className='object-contain'
priority
/>
<RightButton />
</div>
@ -60,7 +60,7 @@ export default function Projects() {
<div className={`flex flex-col h-full ${selectedTab == 1 ? 'visible' : 'hidden'}`}>
<div className='flex-1 w-full relative bg-[#1D1D1F]'>
<LeftButton />
<Image src='images/projects/themyrtletree.svg' alt='The Myrtle Tree Front Page' fill />
<Image src='images/projects/themyrtletree.svg' alt='The Myrtle Tree Front Page' fill priority />
<RightButton />
</div>
<p className='p-2 bg-gradient-to-t from-custom-grey-3 to-gray-500'>
@ -78,7 +78,13 @@ export default function Projects() {
<div className={`flex flex-col h-full ${selectedTab == 2 ? 'visible' : 'hidden'}`}>
<div className='flex-1 w-full relative'>
<LeftButton />
<Image src='/images/projects/myglucose.jpg' alt='MyGlucose Front Page' fill className='object-contain' />
<Image
src='/images/projects/myglucose.jpg'
alt='MyGlucose Front Page'
fill
priority
className='object-contain'
/>
<RightButton />
</div>
<p className='p-2 bg-gradient-to-t from-custom-grey-3 to-gray-500'>
@ -98,6 +104,7 @@ export default function Projects() {
alt='Personal website front page'
fill
className='object-contain'
priority
/>
<RightButton />
</div>
@ -112,51 +119,17 @@ export default function Projects() {
</div>
{/* Navigation */}
<nav className='bg-custom-grey-3 h-10 flex items-center justify-center'>
<RadioGroup.Root
className='flex gap-3'
defaultValue='item-1'
aria-label='Select project page'
orientation='horizontal'
>
<RadioGroup.Item
className='bg-custom-white w-2 h-2 rounded-full hover:bg-custom-white-2'
value='item-1'
onClick={() => {
setSelectedTab(0);
}}
>
<RadioGroup.Indicator className='flex after:w-2 after:h-2 after:rounded-full after:bg-custom-blue-2' />
</RadioGroup.Item>
<RadioGroup.Item
className='bg-custom-white w-2 h-2 rounded-full hover:bg-custom-white-2'
value='item-2'
onClick={() => {
setSelectedTab(1);
}}
>
<RadioGroup.Indicator className='flex after:w-2 after:h-2 after:rounded-full after:bg-custom-blue-2' />
</RadioGroup.Item>
<RadioGroup.Item
className='bg-custom-white w-2 h-2 rounded-full hover:bg-custom-white-2'
value='item-3'
onClick={() => {
setSelectedTab(2);
}}
>
<RadioGroup.Indicator className='flex after:w-2 after:h-2 after:rounded-full after:bg-custom-blue-2' />
</RadioGroup.Item>
<RadioGroup.Item
className='bg-custom-white w-2 h-2 rounded-full hover:bg-custom-white-2'
value='item-4'
onClick={() => {
setSelectedTab(3);
}}
>
<RadioGroup.Indicator className='flex after:w-2 after:h-2 after:rounded-full after:bg-custom-blue-2' />
</RadioGroup.Item>
</RadioGroup.Root>
</nav>
<div className='bg-custom-grey-3 h-10 flex items-center justify-center gap-3'>
{[...Array(MAX_TABS).keys()].map((i) => (
<div
key={`tab-${i}`}
className={`${
selectedTab == i ? 'bg-custom-blue-1' : 'bg-custom-white hover:bg-custom-white-2'
} w-2 h-2 rounded-full`}
onClick={() => setSelectedTab(i)}
></div>
))}
</div>
</div>
</div>
);

50
package-lock.json generated
View File

@ -10,7 +10,6 @@
"dependencies": {
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-form": "^0.0.3",
"@radix-ui/react-radio-group": "^1.1.3",
"autoprefixer": "10.4.16",
"next": "13.5.4",
"postcss": "8.4.31",
@ -825,38 +824,6 @@
}
}
},
"node_modules/@radix-ui/react-radio-group": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.1.3.tgz",
"integrity": "sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-context": "1.0.1",
"@radix-ui/react-direction": "1.0.1",
"@radix-ui/react-presence": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-roving-focus": "1.0.4",
"@radix-ui/react-use-controllable-state": "1.0.1",
"@radix-ui/react-use-previous": "1.0.1",
"@radix-ui/react-use-size": "1.0.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-roving-focus": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
@ -976,23 +943,6 @@
}
}
},
"node_modules/@radix-ui/react-use-previous": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
"integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
"dependencies": {
"@babel/runtime": "^7.13.10"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-rect": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",

1
package.json
View File

@ -13,7 +13,6 @@
"dependencies": {
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-form": "^0.0.3",
"@radix-ui/react-radio-group": "^1.1.3",
"autoprefixer": "10.4.16",
"next": "13.5.4",
"postcss": "8.4.31",