Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Navbar #7

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Navbar #7

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
426eeec
Implemented navbar
DevTrav Nov 10, 2024
feb815b
Added hero component route
DevTrav Nov 10, 2024
4dae1ca
Adding hero component and props
DevTrav Nov 10, 2024
9d6ff06
Adding hero component to App routing
DevTrav Nov 13, 2024
6eb50e9
Adding updated Home page layout
DevTrav Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions src/app/components/hero/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
// components/Hero.tsx
import React from 'react'
import { Box, Typography, Container } from '@mui/material'

interface HeroProps {
imageUrl: string
title: string
subtitle?: string
}

const Hero: React.FC<HeroProps> = ({ imageUrl, title, subtitle }) => {
return (
<Box
sx={{
height: '500px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundImage: `url(${imageUrl})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
position: 'relative',
color: 'white',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the color here for the inner text elements? If so I would add color attributes to the specific element and not this parent.

}}
>
DevTrav marked this conversation as resolved.
Show resolved Hide resolved
{/* Overlay */}
<Box
sx={{
position: 'absolute',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 seems a little bit odd... I'm not sure why the absolute positioning is being used here. Are you just wanting to center this element?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also seems odd to have a Stack without any child elements.. the whole point of Stack is to position child elements.

top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
zIndex: 1,
}}
/>
<Container
DevTrav marked this conversation as resolved.
Show resolved Hide resolved
sx={{
position: 'relative',
zIndex: 2,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 can we accomplish this without z-index? Usually I try to avoid modifying z-index because it can lead to really challenging visual bugs.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the Hero component example, the zIndex is used to control the layering of the overlay, background image, and text. It appears to be semantically aligned with MUI's best practices.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should be able to just rely on the default stacking order for these elements.

textAlign: 'center',
}}
>
<Typography variant="h2" component="h1" fontWeight="bold">
DevTrav marked this conversation as resolved.
Show resolved Hide resolved
{title}
</Typography>
{subtitle && (
<Typography variant="h5" component="p" mt={2}>
{subtitle}
</Typography>
)}
</Container>
</Box>
)
}

export default Hero
5 changes: 4 additions & 1 deletion src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import type { Metadata } from 'next'
import Navbar from './components/navigation/navbar'
import './globals.css' // Import your global styles
import { ThemeProvider } from '@mui/material'

export const metadata: Metadata = {
title: 'Texas Defense Data',
Expand All @@ -16,7 +17,9 @@ export default function RootLayout({
return (
<html lang="en">
<body>
<Navbar />
<ThemeProvider theme={{}}>
<Navbar />
</ThemeProvider>
{children}
</body>
</html>
Expand Down
92 changes: 90 additions & 2 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,97 @@
import Image from 'next/image'
import * as React from 'react'
import Paper from '@mui/material/Paper'
import Stack from '@mui/material/Stack'
import { Button, Divider } from '@mui/material'

// const Item = styled(Paper)(({ theme }) => ({
// backgroundColor: '#fff',
DevTrav marked this conversation as resolved.
Show resolved Hide resolved
// ...theme.typography.body2,
// padding: theme.spacing(1),
// textAlign: 'center',
// color: theme.palette.text.secondary,
// ...theme.applyStyles('dark', {
// backgroundColor: '#1A2027',
// }),
// }))
// app/page.tsx
import { Box, Typography, Container } from '@mui/material'

interface HeroProps {
imageUrl: string
title: string
subtitle?: string
}

const Hero: React.FC<HeroProps> = ({ imageUrl, title, subtitle }) => {
return (
DevTrav marked this conversation as resolved.
Show resolved Hide resolved
<Box
sx={{
height: '500px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundImage: `url(${imageUrl})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
position: 'relative',
color: 'white',
}}
>
{/* Overlay */}
<Box
sx={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
zIndex: 1,
}}
/>
<Container
sx={{
position: 'relative',
zIndex: 2,
textAlign: 'center',
}}
>
<Typography variant="h2" component="h1" fontWeight="bold">
{title}
</Typography>
{subtitle && (
<Typography variant="h5" component="p" mt={2}>
{subtitle}
</Typography>
)}
</Container>
</Box>
)
}

export default function Home() {
return (
<main>
<h1> Home </h1>
<h1> Texas Defense Data </h1>
<p> The only site for publicly available indigent defense data</p>
<div>
<Hero
imageUrl="https://example.com/your-image.jpg"
title="Welcome to Our Website"
subtitle="Explore the best content here"
/>
</div>
<div>
<Stack
direction="row"
spacing={2}
divider={<Divider orientation="vertical" flexItem />}
>
<Paper>Paper 1</Paper>
<Paper>Paper 2</Paper>
<Button>Paper 3</Button>
</Stack>
</div>
</main>
)
}