From 888fd0cd359d2ee8e22334a07b62e7f735bec268 Mon Sep 17 00:00:00 2001 From: Joe Dravarol Date: Mon, 13 Feb 2023 22:24:46 +0000 Subject: [PATCH] feat: tablet about Fixing Typescript "Cannot find module" for svg assets: [svgr d.ts](https://github.com/gregberge/svgr/issues/551#issuecomment-1265632858) --- declarations.d.ts | 9 +++ next.config.js | 6 ++ src/features/About.tsx | 128 +++++++++++++++++++++++++++++--------- src/features/InfoCard.tsx | 48 ++++++++++---- tsconfig.json | 2 +- 5 files changed, 149 insertions(+), 44 deletions(-) create mode 100644 declarations.d.ts diff --git a/declarations.d.ts b/declarations.d.ts new file mode 100644 index 0000000..83d6054 --- /dev/null +++ b/declarations.d.ts @@ -0,0 +1,9 @@ +declare module '*.svg?url' { + import type { ComponentType, SVGProps } from 'react'; + + type SvgComponent = ComponentType; + + const Svg: SvgComponent; + + export = Svg; +} diff --git a/next.config.js b/next.config.js index 8a68ec1..a0f0421 100644 --- a/next.config.js +++ b/next.config.js @@ -4,8 +4,14 @@ const nextConfig = { config.module.rules.push({ test: /\.svg$/i, issuer: /\.[jt]sx?$/, + resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url use: ['@svgr/webpack'], }); + config.module.rules.push({ + test: /\.svg$/i, + type: 'asset', + resourceQuery: /url/, // *.svg?url + }); return config; }, diff --git a/src/features/About.tsx b/src/features/About.tsx index 3224884..e6b9c80 100644 --- a/src/features/About.tsx +++ b/src/features/About.tsx @@ -1,50 +1,118 @@ import Box from '@mui/material/Box'; +import { styled } from '@mui/material/styles'; import React from 'react'; import mobileEnjoyablePlaceSm from '@/assets/homepage/enjoyable-place-mobile.jpg'; import mobileEnjoyablePlaceMd from '@/assets/homepage/enjoyable-place-mobile@2x.jpg'; +import tabletEnjoyablePlaceSm from '@/assets/homepage/enjoyable-place-tablet.jpg'; +import tabletEnjoyablePlaceMd from '@/assets/homepage/enjoyable-place-tablet@2x.jpg'; import mobileLocallySourceSm from '@/assets/homepage/locally-sourced-mobile.jpg'; import mobileLocallySourceMd from '@/assets/homepage/locally-sourced-mobile@2x.jpg'; +import tabletLocallySourceSm from '@/assets/homepage/locally-sourced-tablet.jpg'; +import tabletLocallySourceMd from '@/assets/homepage/locally-sourced-tablet@2x.jpg'; +import patternCurveTopLeft from '@/assets/patterns/pattern-curve-top-left.svg?url'; +import patternCurveTopRight from '@/assets/patterns/pattern-curve-top-right.svg?url'; +import patternLines from '@/assets/patterns/pattern-lines.svg?url'; import InfoCard from './InfoCard'; +const StyledBox = styled(Box)(({ theme }) => ({ + [theme.breakpoints.up('tablet')]: { + position: 'relative', + '&::before, &::after': { + content: '""', + width: 895, // default svg width + height: 320, // default svg height + backgroundImage: `url(${patternCurveTopRight})`, + position: 'absolute', + top: 196, + left: -516, // svgWidth - (tabletSize / 2) + adjustment + zIndex: 1, + }, + '&::after': { + backgroundImage: `url(${patternCurveTopLeft})`, + top: 'revert', + left: 'revert', + // left: 384, + right: -511, // svgWidth - (tabletSize / 2) + bottom: -118, // Last InfoCard bottom margin + }, + '.bg-pattern::after': { + content: '""', + width: 160, // default svg width + height: 76, // default svg height + backgroundImage: `url(${patternLines})`, + position: 'absolute', + top: 228, + left: 471, + zIndex: 5, + }, + }, +})); const About: React.FC = () => { + const enjoyablePlace = { + title: 'Enjoyable place for all the family', + description: ` + Our relaxed surroundings make dining with us a great experience for everyone. We can even arrange + a tour of the farm before your meal. + `, + img: { + src: mobileEnjoyablePlaceSm.src, + alt: 'Country landscape', + sources: [ + { + srcSet: tabletEnjoyablePlaceMd.src, + media: '(min-width: 900px)', + }, + { + srcSet: tabletEnjoyablePlaceSm.src, + media: '(min-width: 768px)', + }, + { + srcSet: mobileEnjoyablePlaceMd.src, + media: '(min-width: 400px)', + }, + ], + }, + }; + const locallySourcedFood = { + title: 'The most locally sourced food', + description: ` + All our ingredients come directly from our farm or local fishery. So you can be sure that you're eating + the freshest, most sustainable food. + `, + img: { + src: mobileLocallySourceSm.src, + alt: 'Country landscape', + sources: [ + { + srcSet: tabletLocallySourceMd.src, + media: '(min-width: 900px)', + }, + { + srcSet: tabletLocallySourceSm.src, + media: '(min-width: 768px)', + }, + { + srcSet: mobileLocallySourceMd.src, + media: '(min-width: 400px)', + }, + ], + }, + }; + return ( - + - - + + ); }; diff --git a/src/features/InfoCard.tsx b/src/features/InfoCard.tsx index a322b71..b56f137 100644 --- a/src/features/InfoCard.tsx +++ b/src/features/InfoCard.tsx @@ -13,10 +13,10 @@ type Props = CardProps & { img: { src: string; alt: string; - sources: [{ + sources: { srcSet: string; media: string; - }] + }[] } } @@ -25,18 +25,33 @@ const StyledCard = styled(Card)(({ theme }) => ({ marginBottom: 101, overflow: 'revert', // Prevent square box shadow position: 'relative', - zIndex: 5, + + [theme.breakpoints.up('tablet')]: { + marginInline: 'auto', + marginBottom: 118, + maxWidth: 573, + }, })); -const StyledCardMedia = styled(CardMedia)(() => ({ +const StyledCardMedia = styled(CardMedia)(({ theme }) => ({ boxShadow: '0 75px 100px -50px rgba(56, 66, 85, 0.5)', + position: 'relative', + zIndex: 5, + [theme.breakpoints.up('tablet')]: { + }, })) as typeof CardMedia; -const StyledCardContent = styled(CardContent)(() => ({ +const StyledCardContent = styled(CardContent)(({ theme }) => ({ padding: 'revert', '&:last-child': { padding: 'revert', }, + + [theme.breakpoints.up('tablet')]: { + maxWidth: 457, + marginInline: 'auto', + // paddingInline: 12, + }, })); const InfoCard: React.FC = ({ img, title, description, ...props }) => { @@ -49,23 +64,30 @@ const InfoCard: React.FC = ({ img, title, description, ...props }) => { - + {title} {description} diff --git a/tsconfig.json b/tsconfig.json index 839aa27..fdfbd9e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,6 +21,6 @@ "@features/*": ["features/*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["next-env.d.ts", "declarations.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] }