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

refactor: some name and styling changes

Browse Source
This commit is contained in:
Riccardo
2023-12-17 17:48:08 +01:00
parent 6245ee943d
commit 878e787ed0
17 changed files with 55 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/custom/background/background.tsx
View File

@@ -1,4 +1,4 @@
import { Tiles } from './components/tiles';
import { Tiles } from './tile/tiles';
type BackgroundProps = {
children: React.ReactNode;

10
components/custom/background/components/card.tsx → components/custom/background/tile/tile.tsx
View File

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

4
components/custom/background/components/cardContent.tsx → components/custom/background/tile/tileContent.tsx
View File

@@ -1,6 +1,6 @@
import { useState } from 'react';
import { z } from 'zod';
import { NewsSchema } from '../../../../utils/types';
import { NewsSchema } from '../../../../utils/schemas';
type CardContentProps = {
story: z.infer<typeof NewsSchema>;
@@ -18,7 +18,7 @@ function getRandomColor() {
return color;
}
export function CardContent({ story, width, height, side }: CardContentProps) {
export function TileContent({ story, width, height, side }: CardContentProps) {
const [firstColor, setFirstColor] = useState(getRandomColor());
const [secondColor, setSecondColor] = useState(getRandomColor());
const [switched, setSwitched] = useState(true);

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

@@ -3,8 +3,8 @@
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
import { z } from 'zod';
import { NewsSchema } from '../../../../utils/types';
import { Card } from './card';
import { NewsSchema } from '../../../../utils/schemas';
import { Tile } from './tile';
type TilesProps = {
children: React.ReactNode;
@@ -74,7 +74,7 @@ export const Tiles = ({ children }: TilesProps) => {
width: `${baseWidth * 4}px`
}}
>
<Card
<Tile
newsA={news[randomA]}
newsB={news[randomB]}
width={baseHeight}
@@ -110,5 +110,5 @@ export const Tiles = ({ children }: TilesProps) => {
);
}
return <div className='flex flex-col justify-between'>{renderGrid()}</div>;
return <div className='flex h-[100vh] overflow-hidden'>{renderGrid()}</div>;
};