111 lines
3.1 KiB
TypeScript
111 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
|
|
const styles = {
|
|
brandSection: {
|
|
marginTop: '2rem',
|
|
textAlign: 'center' as const,
|
|
color: '#2e4057',
|
|
position: 'relative' as const
|
|
},
|
|
brandSectionBar: {
|
|
content: '',
|
|
position: 'absolute' as const,
|
|
top: '-15px',
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
width: '50px',
|
|
height: '3px',
|
|
backgroundColor: '#edae49',
|
|
borderRadius: '3px'
|
|
},
|
|
brandList: {
|
|
marginTop: '0.8rem',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
flexWrap: 'wrap' as const,
|
|
gap: '1.2rem'
|
|
},
|
|
brandLink: {
|
|
color: '#083d77',
|
|
textDecoration: 'none',
|
|
fontWeight: '500',
|
|
padding: '0.5rem 1rem',
|
|
borderRadius: '20px',
|
|
transition: 'all 0.2s ease',
|
|
backgroundColor: 'white',
|
|
border: '1px solid rgba(8, 61, 119, 0.1)'
|
|
}
|
|
};
|
|
|
|
export default function BrandList() {
|
|
return (
|
|
<div style={styles.brandSection}>
|
|
<div style={styles.brandSectionBar}></div>
|
|
<p>Popular brands</p>
|
|
<div style={styles.brandList}>
|
|
<Link
|
|
href="/results?brand=1"
|
|
style={styles.brandLink}
|
|
onMouseOver={(e) => {
|
|
e.currentTarget.style.backgroundColor = '#edae49';
|
|
e.currentTarget.style.color = '#2e4057';
|
|
}}
|
|
onMouseOut={(e) => {
|
|
e.currentTarget.style.backgroundColor = 'white';
|
|
e.currentTarget.style.color = '#083d77';
|
|
}}
|
|
>Tesla</Link>
|
|
<Link
|
|
href="/results?brand=2"
|
|
style={styles.brandLink}
|
|
onMouseOver={(e) => {
|
|
e.currentTarget.style.backgroundColor = '#edae49';
|
|
e.currentTarget.style.color = '#2e4057';
|
|
}}
|
|
onMouseOut={(e) => {
|
|
e.currentTarget.style.backgroundColor = 'white';
|
|
e.currentTarget.style.color = '#083d77';
|
|
}}
|
|
>BMW</Link>
|
|
<Link
|
|
href="/results?brand=3"
|
|
style={styles.brandLink}
|
|
onMouseOver={(e) => {
|
|
e.currentTarget.style.backgroundColor = '#edae49';
|
|
e.currentTarget.style.color = '#2e4057';
|
|
}}
|
|
onMouseOut={(e) => {
|
|
e.currentTarget.style.backgroundColor = 'white';
|
|
e.currentTarget.style.color = '#083d77';
|
|
}}
|
|
>Toyota</Link>
|
|
<Link
|
|
href="/results?brand=4"
|
|
style={styles.brandLink}
|
|
onMouseOver={(e) => {
|
|
e.currentTarget.style.backgroundColor = '#edae49';
|
|
e.currentTarget.style.color = '#2e4057';
|
|
}}
|
|
onMouseOut={(e) => {
|
|
e.currentTarget.style.backgroundColor = 'white';
|
|
e.currentTarget.style.color = '#083d77';
|
|
}}
|
|
>Audi</Link>
|
|
<Link
|
|
href="/results?brand=5"
|
|
style={styles.brandLink}
|
|
onMouseOver={(e) => {
|
|
e.currentTarget.style.backgroundColor = '#edae49';
|
|
e.currentTarget.style.color = '#2e4057';
|
|
}}
|
|
onMouseOut={(e) => {
|
|
e.currentTarget.style.backgroundColor = 'white';
|
|
e.currentTarget.style.color = '#083d77';
|
|
}}
|
|
>Mercedes</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|