- 
+const LocationCard = (props: ComponentProps) => {
+ const getScoreClasses = (score: number, count: number) => {
+ if (count === 0) return {
+ text: 'text-white',
+ bg: 'bg-white'
+ };
+
+ if (score <= 40) return {
+ text: 'text-rating-red',
+ bg: 'bg-rating-red'
+ };
+ if (score <= 69) return {
+ text: 'text-rating-yellow',
+ bg: 'bg-rating-yellow'
+ };
+ return {
+ text: 'text-brand-green',
+ bg: 'bg-brand-green'
+ };
+ };
+
+ const criticClasses = getScoreClasses(props.data.critic_score, props.data.critic_count);
+ const userClasses = getScoreClasses(props.data.user_score, props.data.user_count);
+
+ return (
+
+ props.onCardClick(props.data.id)}>
+
-)
+
+ );
+}
export default LocationCard;
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 0445e23..c3bdcf0 100755
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,53 +2,30 @@
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
- colors: {
- transparent: 'transparent',
- current: 'currentColor',
- primary: '#202225',
- secondary: '#2f3136',
- tertiary: '#a8adb3',
- quartenary: '#4D4E51',
- green: '#85CE73',
- error: '#ff5454',
- gray: '#797979',
- yellow: '#e5c453'
+ extend: {
+ colors: {
+ primary: '#202225',
+ secondary: '#2f3136',
+ tertiary: '#a8adb3',
+ quartenary: '#4D4E51',
+ 'brand-green': '#85CE73',
+ error: '#ff5454',
+ 'brand-yellow': '#e5c453',
+ 'rating-red': '#CE7385',
+ 'rating-green': '#85CE73',
+ 'rating-yellow': '#DECA21'
+ },
+ borderColor: {
+ primary: '#38444d',
+ secondary: '#202225'
+ },
+ fontFamily: {
+ lato: ['Lato', 'sans-serif']
+ },
+ fontSize: {
+ xxs: ['0.65rem', { lineHeight: '.85rem' }],
+ },
},
- borderColor: {
- primary: '#38444d',
- secondary: '#202225'
- },
- fontFamily: {
- lato: ['Lato', 'sans-serif']
- },
- fontSize: {
- xxs: ['0.65rem', { lineHeight: '.85rem' }],
- xs: ['0.75rem', { lineHeight: '1rem' }],
- sm: ['0.875rem', { lineHeight: '1.25rem' }],
- base: ['1rem', { lineHeight: '1.5rem' }],
- lg: ['1.125rem', { lineHeight: '1.75rem' }],
- xl: ['1.25rem', { lineHeight: '1.75rem' }],
- '2xl': ['1.5rem', { lineHeight: '2rem' }],
- '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
- '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
- '5xl': ['3rem', { lineHeight: '1' }],
- '6xl': ['3.75rem', { lineHeight: '1' }],
- '7xl': ['4.5rem', { lineHeight: '1' }],
- '8xl': ['6rem', { lineHeight: '1' }],
- '9xl': ['8rem', { lineHeight: '1' }],
- },
- fontWeight: {
- thin: '100',
- extralight: '200',
- light: '300',
- normal: '400',
- medium: '500',
- semibold: '600',
- bold: '700',
- extrabold: '800',
- black: '900',
- },
- extend: {},
},
plugins: [],
}
diff --git a/tsconfig.json b/tsconfig.json
index 5aa8f53..9294d6d 100755
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,7 +10,7 @@
"react": ["./node_modules/preact/compat/"],
"react-dom": ["./node_modules/preact/compat/"]
},
-
+ "types": ["node"],
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
+ {
+ e.currentTarget.src = 'https://pub-6b637ea51b64436dbf0514bc956972d1.r2.dev/public/upload/misty-forest-black-white.webp';
+ e.currentTarget.onerror = null;
+ }}
+ />
+
+
+
+
-
- {props.data.name}
+{props.data.regency_name}, {props.data.province_name}
-
- {props.data.critic_count !== 0 &&
{props.data.name}
-{props.data.regency_name}, {props.data.province_name}
-
-
- }
- {props.data.user_score !== 0 &&
{props.data.critic_score}
-
-
+
- {props.data.critic_count !== 0 ? props.data.critic_score : 'NR'}
+
+
critic score ({props.data.critic_count})
+Critic score ({props.data.critic_count})
-
- }
- {props.data.user_score}
-
-
+
- {props.data.user_count !== 0 ? props.data.user_score : 'NR'}
+
+
user score ({props.data.user_count})
+User score ({props.data.user_count})