roryhealy
/
workoutbuddy
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge pull request 'Add exercise list to exercise page' (#3) from feature02-exercises into main 

Reviewed-on: https://git.roryhealy.dev/roryhealy/workoutbuddy/pulls/3
This commit is contained in:
Rory Healy 2023-10-28 22:39:30 +11:00
parent a0ed96a4ba 67561a18f8
commit d1ee502cec
7 changed files with 265 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/exercises/page.tsx Normal file
View File

@ -0,0 +1,9 @@
import List from '@/components/list/list';
export default function Exercises() {
return (
<section className='w-full h-[90%] fixed flex flex-col items-center justify-center'>
<List heading='Exercises' />
</section>
);
}

8
app/layout.tsx
View File

@ -2,7 +2,7 @@ import type { Metadata } from 'next';
import localFont from 'next/font/local';
import Header from '@/components/header/header';
import './globals.css'
import './globals.css';
const font = localFont({
src: '../public/fonts/ManropeVariable.woff2',
@ -18,11 +18,9 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang='en'>
<body className={`${font.className} flex flex-col h-screen w-full`}>
<body className={`bg-wb-white1 ${font.className} h-screen w-screen flex flex-col`}>
<Header />
<main className='flex flex-1 place-content-center'>
{children}
</main>
<main className='h-full w-full flex flex-1 items-center justify-center'>{children}</main>
</body>
</html>
);

4
app/page.tsx
View File

@ -1,5 +1,3 @@
export default function Root() {
return (
<h1 className='text-6xl mt-10'>Welcome to Workout Buddy</h1>
);
return <h1 className='text-6xl mt-10'>Welcome to Workout Buddy</h1>;
}

10
components/header/header.tsx
View File

@ -2,10 +2,14 @@ import Link from 'next/link';
export default function Header() {
return (
<header className='bg-wb-blue3 text-wb-white1 text-lg font-medium h-12 w-full sticky top-0 flex items-center'>
<Link href='/' className='text-2xl ml-3 font-semibold'>Workout Buddy</Link>
<header className='bg-wb-blue3 text-wb-white1 text-lg font-medium py-2 w-full flex items-center'>
<Link href='/' className='text-2xl ml-3 font-semibold'>
Workout Buddy
</Link>
<span className='bg-wb-white1 w-[2px] h-7 mx-4'></span>
<Link href='/exercises' className='mr-3'>Exercises</Link>
<Link href='/exercises' className='mr-3'>
Exercises
</Link>
<Link href='/workouts'>Workouts</Link>
<p className='ml-auto mr-3'>Sign in</p>
</header>

40
components/list/list.tsx Normal file
View File

@ -0,0 +1,40 @@
'use client';
import * as ScrollArea from '@radix-ui/react-scroll-area';
export default function List({heading}: {heading?: string}) {
return (
<div className='h-full w-5/6 grid grid-cols-2'>
<ScrollArea.Root className='bg-white w-[99%] h-full rounded overflow-hidden'>
<ScrollArea.Viewport className='w-full h-full rounded'>
<div className='py-4 px-5'>
<div className='font-semibold'>{heading !== undefined ? heading : 'Heading'}</div>
{[...Array(25).keys()].map((tag) => (
<div className='text-sm mt-2.5 pt-2.5 border-t border-t-wb-white2' key={tag}>
{tag + 1}
</div>
))}
</div>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar
className='flex select-none touch-none p-0.5 bg-[#00000020] transition-colors duration-200 ease-out hover:bg-[#00000030] w-2.5'
orientation='vertical'
>
<ScrollArea.Thumb className="flex-1 bg-[#84828E] rounded" />
</ScrollArea.Scrollbar>
</ScrollArea.Root>
<ScrollArea.Root className='bg-white w-[99%] h-full rounded overflow-hidden'>
<ScrollArea.Viewport className='w-full h-full rounded'>
<div className='py-4 px-5'>Content</div>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar
className='flex select-none touch-none p-0.5 bg-[#00000020] transition-colors duration-200 ease-out hover:bg-[#00000030] w-2.5'
orientation='vertical'
>
<ScrollArea.Thumb className="flex-1 bg-[#84828E] rounded" />
</ScrollArea.Scrollbar>
</ScrollArea.Root>
</div>
);
}

212
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "workoutbuddy",
"version": "0.1.0",
"dependencies": {
"@radix-ui/react-scroll-area": "^1.0.5",
"next": "14.0.0",
"react": "^18",
"react-dom": "^18"
@ -52,7 +53,6 @@
"version": "7.23.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
"integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
"dev": true,
"dependencies": {
"regenerator-runtime": "^0.14.0"
},
@ -381,6 +381,203 @@
"node": ">= 8"
}
},
"node_modules/@radix-ui/number": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
"integrity": "sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==",
"dependencies": {
"@babel/runtime": "^7.13.10"
}
},
"node_modules/@radix-ui/primitive": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
"integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
"dependencies": {
"@babel/runtime": "^7.13.10"
}
},
"node_modules/@radix-ui/react-compose-refs": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
"integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
"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-context": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
"integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
"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-direction": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
"integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
"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-presence": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
"integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-use-layout-effect": "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-primitive": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
"integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-slot": "1.0.2"
},
"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-scroll-area": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.5.tgz",
"integrity": "sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/number": "1.0.1",
"@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-use-callback-ref": "1.0.1",
"@radix-ui/react-use-layout-effect": "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-slot": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
"integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-compose-refs": "1.0.1"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-callback-ref": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
"integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
"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-layout-effect": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
"integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
"dependencies": {
"@babel/runtime": "^7.13.10"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@rushstack/eslint-patch": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz",
@ -414,13 +611,13 @@
"version": "15.7.9",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.9.tgz",
"integrity": "sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==",
"dev": true
"devOptional": true
},
"node_modules/@types/react": {
"version": "18.2.33",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.33.tgz",
"integrity": "sha512-v+I7S+hu3PIBoVkKGpSYYpiBT1ijqEzWpzQD62/jm4K74hPpSP7FF9BnKG6+fg2+62weJYkkBWDJlZt5JO/9hg==",
"dev": true,
"devOptional": true,
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@ -431,7 +628,7 @@
"version": "18.2.14",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.14.tgz",
"integrity": "sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==",
"dev": true,
"devOptional": true,
"dependencies": {
"@types/react": "*"
}
@ -440,7 +637,7 @@
"version": "0.16.5",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.5.tgz",
"integrity": "sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==",
"dev": true
"devOptional": true
},
"node_modules/@typescript-eslint/parser": {
"version": "6.9.0",
@ -1117,7 +1314,7 @@
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
"dev": true
"devOptional": true
},
"node_modules/damerau-levenshtein": {
"version": "1.0.8",
@ -3540,8 +3737,7 @@
"node_modules/regenerator-runtime": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
"integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
"dev": true
"integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
},
"node_modules/regexp.prototype.flags": {
"version": "1.5.1",

1
package.json
View File

@ -11,6 +11,7 @@
"prettier": "prettier --write app/"
},
"dependencies": {
"@radix-ui/react-scroll-area": "^1.0.5",
"next": "14.0.0",
"react": "^18",
"react-dom": "^18"