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 all 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
70 changes: 70 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,70 @@
import * as React from 'react';
import { Stack, Typography, Container, Divider } from '@mui/material';

interface HeroProps {
imageUrl: string;
title: string;
subtitle?: string;
children?: React.ReactNode;
}

const Hero: React.FC<HeroProps> = ({ imageUrl, title, subtitle, children }) => {
return (
<Stack
sx={{
height: '500px',
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.

}}
// Using Stack properties to control layout
alignItems="center"
justifyContent="center"
>
{/* Overlay */}
<Stack
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>
)}
{children && (
<Stack
direction="row"
spacing={2}
divider={<Divider orientation="vertical" flexItem />}
mt={3}
justifyContent="center"
>
{children}
</Stack>
)}
</Container>
</Stack>
);
};

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
20 changes: 17 additions & 3 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,23 @@
import Image from 'next/image'
import * as React from 'react';
import Hero from '@/app/components/hero';
import { Box, Typography, Button } from '@mui/material';

export default function Home() {
return (
<main>
<h1> Home </h1>
<Hero
imageUrl="https://example.com/your-image.jpg"
title="Texas Defense Data"
subtitle="The only site for publicly available indigent defense data"
>
<Box sx={{ padding: 2 }}>
<Typography variant="subtitle1">Label 1</Typography>
</Box>
<Box sx={{ padding: 2 }}>
<Typography variant="subtitle1">Label 2</Typography>
</Box>
<Button variant="contained">Action</Button>
</Hero>
</main>
)
);
}