riccardo/newsletter-hackernews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: removed unnecessary tile size variable

Browse Source
This commit is contained in:
Riccardo
2023-12-18 15:56:32 +01:00
parent 28a35dbf41
commit 875d66f2f7
5 changed files with 34 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/custom/background/tile/tile.tsx
View File

@@ -6,11 +6,9 @@ import { TileContent } from './tileContent';
type CardProps = { type CardProps = {
newsA?: z.infer<typeof NewsSchema>; newsA?: z.infer<typeof NewsSchema>;
newsB?: z.infer<typeof NewsSchema>; newsB?: z.infer<typeof NewsSchema>;
width: number;
height: number;
}; };
export function Tile({ newsA, newsB, width, height }: CardProps) { export function Tile({ newsA, newsB }: CardProps) {
const [switched, setSwitched] = useState(false); const [switched, setSwitched] = useState(false);
const [active, setActive] = useState(Math.random() < 0.5); const [active, setActive] = useState(Math.random() < 0.5);
const [delayed, setDelayed] = useState(true); const [delayed, setDelayed] = useState(true);
@@ -41,8 +39,8 @@ export function Tile({ newsA, newsB, width, height }: CardProps) {
<div className='transform-gpu'> <div className='transform-gpu'>
<div className={`absolute left-0 top-0 w-full ${''}`}> <div className={`absolute left-0 top-0 w-full ${''}`}>
{active {active
? TileContent({ story: newsA, width, height, side: true }) ? TileContent({ story: newsA, side: true })
: TileContent({ story: newsB, width, height, side: false })} : TileContent({ story: newsB, side: false })}
</div> </div>
</div> </div>
</div> </div>

10
components/custom/background/tile/tileContent.tsx
View File

@@ -5,8 +5,6 @@ import { NewsSchema } from '../../../../utils/schemas';
type CardContentProps = { type CardContentProps = {
story: z.infer<typeof NewsSchema>; story: z.infer<typeof NewsSchema>;
side: boolean; side: boolean;
width: number;
height: number;
}; };
function getRandomColor() { function getRandomColor() {
@@ -18,7 +16,7 @@ function getRandomColor() {
return color; return color;
} }
export function TileContent({ story, width, height, side }: CardContentProps) { export function TileContent({ story, side }: CardContentProps) {
const [firstColor, setFirstColor] = useState(getRandomColor()); const [firstColor, setFirstColor] = useState(getRandomColor());
const [secondColor, setSecondColor] = useState(getRandomColor()); const [secondColor, setSecondColor] = useState(getRandomColor());
const [switched, setSwitched] = useState(true); const [switched, setSwitched] = useState(true);
@@ -34,11 +32,9 @@ export function TileContent({ story, width, height, side }: CardContentProps) {
return ( return (
<div <div
className={`overflow-hidden p-6 shadow-sm`} className={`h-40 w-40 overflow-hidden p-6 shadow-sm`}
style={{ style={{
backgroundColor: `${color}`, backgroundColor: `${color}`
height: `${height * 4}px`,
width: `${width * 4}px`
}} }}
> >
<h1 className='overflow-auto font-semibold'>{story.title}</h1> <h1 className='overflow-auto font-semibold'>{story.title}</h1>

23
components/custom/background/tile/tiles.tsx
View File

@@ -21,9 +21,6 @@ export const Tiles = ({ children }: TilesProps) => {
}); });
const [news, setNews] = useState<z.infer<typeof NewsSchema>[]>(); const [news, setNews] = useState<z.infer<typeof NewsSchema>[]>();
const baseWidth = 40;
const baseHeight = 40;
useEffect(() => { useEffect(() => {
async function getNews() { async function getNews() {
const news = await fetch('/api/news').then(res => res.json()); const news = await fetch('/api/news').then(res => res.json());
@@ -66,20 +63,8 @@ export const Tiles = ({ children }: TilesProps) => {
); );
return ( return (
<div <div key={key} className={`m-1 h-40 w-40`}>
key={key} <Tile newsA={news[randomA]} newsB={news[randomB]} />
className={`m-1`}
style={{
height: `${baseHeight * 4}px`,
width: `${baseWidth * 4}px`
}}
>
<Tile
newsA={news[randomA]}
newsB={news[randomB]}
width={baseHeight}
height={baseHeight}
/>
</div> </div>
); );
} }
@@ -93,8 +78,8 @@ export const Tiles = ({ children }: TilesProps) => {
} }
function renderGrid() { function renderGrid() {
const columns = Math.ceil(windowSize.width / (baseWidth * 4)); const columns = Math.ceil(windowSize.width / (40 * 4));
const rows = Math.ceil(windowSize.height / (baseHeight * 4)); const rows = Math.ceil(windowSize.height / (40 * 4));
return ( return (
<div> <div>

20
components/emails/newsletter.tsx
View File

@@ -27,7 +27,7 @@ export default function NewsletterTemplate(
subject: `What's new from Hackernews?`, subject: `What's new from Hackernews?`,
template: ( template: (
<Html> <Html>
<Section style={main}> <Section className='bg-white'>
<div className='mx-auto w-full max-w-2xl overflow-hidden rounded-lg bg-white shadow-lg'> <div className='mx-auto w-full max-w-2xl overflow-hidden rounded-lg bg-white shadow-lg'>
<div className='text-center '> <div className='text-center '>
<h1 className='my-4 text-3xl font-bold'>Good day!</h1> <h1 className='my-4 text-3xl font-bold'>Good day!</h1>
@@ -36,7 +36,13 @@ export default function NewsletterTemplate(
{sayings[Math.floor(Math.random() * sayings.length)]}: {sayings[Math.floor(Math.random() * sayings.length)]}:
</p> </p>
</div> </div>
<Container style={container}> <Container
style={{
margin: '0 auto',
padding: '20px 0 48px',
width: '580px'
}}
>
<Text> <Text>
{stories.map(story => { {stories.map(story => {
return ( return (
@@ -88,13 +94,3 @@ export default function NewsletterTemplate(
) )
}; };
} }
const main = {
backgroundColor: '#ffffff'
};
const container = {
margin: '0 auto',
padding: '20px 0 48px',
width: '580px'
};

37
components/emails/template.tsx
View File

@@ -12,31 +12,26 @@ type EmailProps = {
export default function Email({ title, body }: EmailProps) { export default function Email({ title, body }: EmailProps) {
return ( return (
<Html> <Html>
<Section <Section className='mx-auto w-full max-w-2xl overflow-hidden rounded-lg bg-white shadow-lg'>
className='mx-auto w-full max-w-2xl overflow-hidden rounded-lg bg-white shadow-lg' <Container
style={main} style={{
> margin: '0 auto',
<Container style={container}> padding: '20px 0 48px',
width: '580px'
}}
>
<h1 className='mt-4 text-center text-3xl font-bold'>{title}</h1> <h1 className='mt-4 text-center text-3xl font-bold'>{title}</h1>
<Text style={paragraph}>{body}</Text> <Text
style={{
fontSize: '16px',
marginBottom: '16px'
}}
>
{body}
</Text>
</Container> </Container>
<Footer /> <Footer />
</Section> </Section>
</Html> </Html>
); );
} }
const main = {
backgroundColor: '#ffffff'
};
const container = {
margin: '0 auto',
padding: '20px 0 48px',
width: '580px'
};
const paragraph = {
fontSize: '16px',
marginBottom: '16px'
};