I'm trying to have restaurant cards displayed on my app and I'm not sure what would be the best way to have the image conditionally render according to which restaurant it is. This way it works but it is not optimal since if I have 10 I have to manually add all 10 imports and cases.
import Link from "next/link";
import React from "react";
import styles from "../styles/Card.module.css";
import kegLogo from "../assets/Keg.png";
import Image from "next/image";
import pizzaLogo from "../assets/pizza-logo.png";
function RestaurantCard({ id, title, description }) {
return (
<Link className={styles.link} href={`/restaurants/${title}`}>
<div className={styles.card}>
{id == 1 && (
<Image className={styles.image} src={kegLogo} alt={title} />
)}
{id == 2 && (
<Image className={styles.image} src={pizzaLogo} alt={title} />
)}
<div className={styles.content}>
<h3 className={styles.title}>{title}</h3>
<p className={styles.description}>{description}</p>
</div>
</div>
</Link>
);
}
export default RestaurantCard;
Related
I'm working on a react with nextjs project.
I'm using Link to scroll to a specific section on the same page.
Here is one of the components that use Link:
import styles from './section1.module.scss';
import Image from 'next/image';
import Button from '#material-ui/core/Button';
import tought_process from '../../../public/thought_process.png';
import Link from 'next/link';
const Section1 = () => {
return (
<div className={styles.container}>
<div className={styles.left}>
<div className={styles.leftContainer}>
<Link href='#enews'>
<div className={styles.buttonContainer}>
<Button className={styles.buttonstyle1}>Get started</Button>
</div>
</Link>
</div>
</div>
<div className={styles.right}>
<Image
src={tought_process}
className={styles.imageStyle}
alt='how to think about organizing'
layout='responsive'
priority
/>
</div>
</div>
);
};
export default Section1;
And here i mark the element with the id:
<div {...handlers} className={styles.bigBody}>
<NavBar open={menuOpen} toggle={setMenuOpen} scrollY={scrollY} />
<SideMenu open={menuOpen} toggle={setMenuOpen} scrollY={scrollY} />
<div className={styles.sections}>
<Section1 />
<Section2 />
<Section3 id='enews' />
<Section4 />
</div>
Can't figure out what i'm doing wrong.
Multiple clickable elements are wrapping each other. Remove the button and add the anchor element.
<Link href="#enews">
<a>Get started</a>
</Link>
<Link href="#enews">
<a className={styles.buttonContainer}>
<span className={styles.buttonstyle1}>Get started</span>
</a>
</Link>
I'd recommend updating the styles so you can remove the inner span element.
I use a custom link component that does a few things (not shown); one is smooth scroll to hash routes if the browser supports smooth scrolling (not Safari).
import NextLink, { LinkProps } from "next/link";
import { HTMLProps, MouseEvent, FC } from "react";
export const Link: FC<LinkProps & HTMLProps<HTMLAnchorElement>> = ({ as, children, href, replace, scroll, shallow, passHref, ...rest}) => {
const onClick = (event: MouseEvent<HTMLAnchorElement>) => {
if (href.startsWith("#")) {
event.preventDefault();
const destination = document.getElementById(href.substring(1));
if (destination) destination.scrollIntoView({ behavior: "smooth" });
}
};
return (
<NextLink as={as} href={href} passHref={passHref} replace={replace} scroll={scroll} shallow={shallow}>
<a href={href} {...rest} onClick={onClick}>
{children}
</a>
</NextLink>
);
};
I removed new lines to condense the code block
If you went with the above approach, don't include the anchor tag since it's automatically included.
import { Link } from "./custom/path/link"
<Link href="#enews">Get started</Link>
Two points here:
As per the nextjs, passHref has to be used if a custom element is used as a child of Link tag instead of an anchor tag.
As per the same docs value of href should be '/#enews' not '#enews'
I am using Quill.js to have a wysiwyg editor, and it recommends to import the snow.css file as the starting point, but I can't seem to override the styling from that file. For instance:
import '../path/snow.css' // The css file for the basic styling
import styles from '../path/component.module.scss' // the module
return (
<div className={[styles.newsWrapper].join(' ')}>
<div data-cy="status-editor-panel" className={styles.newseditor}>
<ReactQuill
className={styles.quill}
theme="snow"
onChange={handleChange}
modules={{}}
placeholder={"Start typing to create your article."}
/>
{/* { richText.count > 0 && <Grid item px={3}>{`${richText.count} total words`}
</Grid> } */}
</div>
{error && (
<p style={{ color: "red" }}>
Please write something about your article
</p>
)}
<div className={"postbuttonwrapper"}></div>
<Button
className={styles.postbutton}
onClick={confirmStepOne}
fullWidth
variant="contained"
>
Next
</Button>
</div>
);
}
I want to make the outlines zero. I'm importing the styling from '../path/component.module.scss' and the module is *after* the import. I don't know how to order the styling.
I am using external stylesheet for react code. It is not working. I have five files in my VS react code. index.html, index.js, AppC.js, AppC.css, UserC.js Except index.html all other files are in src. I am not getting any error only thing css is not getting applied.( I did not change index.html) (Is it okay to change App.js file name as AppC.js or something else? I know we can not change index.html and index.js)
**index.js**
import AppC from './AppC'
import UsersC from './UsersC'
ReactDOM.render(<AppC />,document.getElementById('root'));
**AppC.js**
import React, { Component } from 'react';
import './AppC.css';
import UsersC from './UsersC';
export default class AppC extends Component {
render(){
let style = true;
return (
<React.Fragment>
<h2 className= 'texg'> Hello Css </h2>
<UsersC rang={style ? 'textg' : 'textb' } />
</React.Fragment>
);
}
}
**AppC.css**
.txtg{
color:green;
}
.txtb{
color:blue;
}
**UserC.js**
import React, {Component} from 'react';
export default class UsersC extends Component{
render(){
return (
<h3 className={this.props.rang}> from heading </h3>
);
}
}
change texg to txtg
<React.Fragment>
<h2 className= 'texg'> Hello Css </h2>
//To
<h2 className= 'txtg'> Hello Css </h2>
<UsersC rang={style ? 'textg' : 'textb' } />
</React.Fragment>
I have a Next.js app with two "layout" components:
/layouts/default-layout.tsx:
import { Footer } from '../components/footer';
import { Header } from '../components/header';
import './default-layout.scss';
export const DefaultLayout: React.FC = ({ children }) => (
<div className="d-flex flex-column vh-100">
<Header className="flex-shrink-0 fixed-top" />
<main className="flex-shrink-0">
{children}
</main>
<Footer className="mt-auto" />
</div>
);
/layouts/profile-layout.tsx:
import Helmet from 'react-helmet';
import 'bootstrap/scss/bootstrap.scss';
import './profile-layout.scss';
export const ProfileLayout: React.FC = ({ children }) => (
<div>
<Helmet
link={[
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Poppins|Open+Sans|Dancing+Script&display=swap' },
]}
/>
{children}
</div>
);
Both layout components import some global SCSS styles.
Pages use one layout or the other like this:
const IndexPage: NextPage = () => (
<DefaultLayout>
{/* more content here */}
</DefaultLayout>
);
Most pages use the default layout, but my dynamic pages at /pages/profiles/[id].tsx use the profile layout. Navigating between pages works fine and each page uses the correct layout and correct SCSS files.
But if I type a page directly into the web browser's address bar, I get inconsistent results. Often the wrong SCSS file is used. Having the app open in another tab and navigating around seems to effect it too.
How can I have the correct SCSS styles loaded consistently?
I have two different layouts for front End and for admin End.I am including css files in render function in both layouts but css conflicts in both layouts.
Layout for front End
import React, { Component } from "react";
import { Switch, Redirect, Route } from "react-router-dom";
import Header from "components/FrontEnd/Header/Header";
import Footer from "components/FrontEnd/Footer/Footer";
import Menu from "components/FrontEnd/Menu/Menu";
class Frontend extends Component {
render() {
require("../../assets/fonts/frontEnd.css");
return (
<div className="section-frontEnd">
<Header {...this.props} />
<div id="main-panel" className="" ref="mainPanel">
<Switch>
//Routes Swichting ...
</Switch>
<Footer />
</div>
</div>
);
}
}
export default Frontend;
Layout for Admin End
import React, { Component } from "react";
import { Switch, Redirect } from "react-router-dom";
import Header from "components/Admin/Header/Header";
import Footer from "components/Admin/Footer/Footer";
import Sidebar from "components/Admin/Sidebar/Sidebar";
class Dashboard extends Component {
render() {
require('bootstrap/dist/css/Admin.css')
return (
<div className="wrapper">
<Sidebar />
<div id="main-panel" className="main-panel" ref="mainPanel">
<Header />
<Switch>
//Routes Swichting ...
</Switch>
<Footer />
</div>
</div>
);
}
}
export default Dashboard;
Please suggest me a better solution for this problem.
Note:I am not using webpack file in my project.
Below is my folder structure.
For each page section Make one superclass and Write all CSS based on that. This method won't conflict the layouts.
Example:
.section-frontEnd #main-panel{
// code
}
.admin-frontEnd #main-panel{
// code
}