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 = {
newsA?: 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 [active, setActive] = useState(Math.random() < 0.5);
const [delayed, setDelayed] = useState(true);
@@ -41,8 +39,8 @@ export function Tile({ newsA, newsB, width, height }: CardProps) {
<div className='transform-gpu'>
<div className={`absolute left-0 top-0 w-full ${''}`}>
{active
? TileContent({ story: newsA, width, height, side: true })
: TileContent({ story: newsB, width, height, side: false })}
? TileContent({ story: newsA, side: true })
: TileContent({ story: newsB, side: false })}
</div>
</div>
</div>

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

@@ -5,8 +5,6 @@ import { NewsSchema } from '../../../../utils/schemas';
type CardContentProps = {
story: z.infer<typeof NewsSchema>;
side: boolean;
width: number;
height: number;
};
function getRandomColor() {
@@ -18,7 +16,7 @@ function getRandomColor() {
return color;
}
export function TileContent({ story, width, height, side }: CardContentProps) {
export function TileContent({ story, side }: CardContentProps) {
const [firstColor, setFirstColor] = useState(getRandomColor());
const [secondColor, setSecondColor] = useState(getRandomColor());
const [switched, setSwitched] = useState(true);
@@ -34,11 +32,9 @@ export function TileContent({ story, width, height, side }: CardContentProps) {
return (
<div
className={`overflow-hidden p-6 shadow-sm`}
className={`h-40 w-40 overflow-hidden p-6 shadow-sm`}
style={{
backgroundColor: `${color}`,
height: `${height * 4}px`,
width: `${width * 4}px`
backgroundColor: `${color}`
}}
>
<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 baseWidth = 40;
const baseHeight = 40;
useEffect(() => {
async function getNews() {
const news = await fetch('/api/news').then(res => res.json());
@@ -66,20 +63,8 @@ export const Tiles = ({ children }: TilesProps) => {
);
return (
<div
key={key}
className={`m-1`}
style={{
height: `${baseHeight * 4}px`,
width: `${baseWidth * 4}px`
}}
>
<Tile
newsA={news[randomA]}
newsB={news[randomB]}
width={baseHeight}
height={baseHeight}
/>
<div key={key} className={`m-1 h-40 w-40`}>
<Tile newsA={news[randomA]} newsB={news[randomB]} />
</div>
);
}
@@ -93,8 +78,8 @@ export const Tiles = ({ children }: TilesProps) => {
}
function renderGrid() {
const columns = Math.ceil(windowSize.width / (baseWidth * 4));
const rows = Math.ceil(windowSize.height / (baseHeight * 4));
const columns = Math.ceil(windowSize.width / (40 * 4));
const rows = Math.ceil(windowSize.height / (40 * 4));
return (
<div>

20
components/emails/newsletter.tsx
View File

@@ -27,7 +27,7 @@ export default function NewsletterTemplate(
subject: `What's new from Hackernews?`,
template: (
<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='text-center '>
<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)]}:
</p>
</div>
<Container style={container}>
<Container
style={{
margin: '0 auto',
padding: '20px 0 48px',
width: '580px'
}}
>
<Text>
{stories.map(story => {
return (
@@ -88,13 +94,3 @@ export default function NewsletterTemplate(
)
};
}
const main = {
backgroundColor: '#ffffff'
};
const container = {
margin: '0 auto',
padding: '20px 0 48px',
width: '580px'
};

35
components/emails/template.tsx
View File

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