Skip to content

Commit

Permalink
[refactor] Make IncidentTable more responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
TetraTsunami committed Nov 11, 2024
1 parent 328a78e commit 375f160
Showing 3 changed files with 6 additions and 9 deletions.
10 changes: 5 additions & 5 deletions src/components/IncidentTable.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { formatDateString } from '@/utils'
import { DB, Incident } from 'types'

const IncidentTable = ({ data, incidents }: { data: DB; incidents: [string, Incident][] }) => {
return (
<div className="m-8 overflow-hidden rounded-lg border border-black p-4">
<table className="w-full table-fixed">
<div className="my-8 w-full overflow-x-auto rounded-lg border border-black p-4 md:w-full">
<table className="w-full min-w-[800px] table-auto md:min-w-0 md:max-w-full">
<tbody>
<tr>
<th className="break-words pb-2 font-normal">País</th>
@@ -14,14 +15,13 @@ const IncidentTable = ({ data, incidents }: { data: DB; incidents: [string, Inci
<th className="break-words pb-2 font-normal">Departamento</th>
<th className="break-words pb-2 font-normal">Municipio</th>
</tr>

{incidents.map(([id, incident]) => (
<tr key={id} className="text-gray-500">
<td className="break-words border-t border-black p-4 text-left">{incident.country}</td>
<td className="break-words border-t border-black p-4 text-left">{data.Types[incident.typeID].name}</td>
<td className="break-words border-t border-black p-4 text-left">{data.Categories[data.Types[incident.typeID].categoryID].name}</td>
<td className="break-words border-t border-black p-4 text-left">{incident.dateString}</td>
<td className="break-words border-t border-black p-4 text-left">{incident.description}</td>
<td className="break-words border-t border-black p-4 text-left">{formatDateString(incident.dateString)}</td>
<td className="lg:max-w-[33vw] max-w-[250px] break-words border-t border-black p-4 text-left">{incident.description}</td>
<td className="break-words border-t border-black p-4 text-left">{incident.department}</td>
<td className="break-words border-t border-black p-4 text-left">{incident.municipality}</td>
</tr>
2 changes: 1 addition & 1 deletion src/components/LoadingOverlay.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const LoadingOverlay = ({ isVisible, color }: { isVisible: Boolean; color?: string }) => (
<div
className={`pointer-events-none absolute inset-0 z-[1000] flex w-screen items-center justify-center backdrop-blur-sm transition-opacity`}
className={`pointer-events-none absolute inset-0 z-[1000] flex items-center justify-center backdrop-blur-sm transition-opacity`}
style={{ opacity: isVisible ? '100' : '0' }}
>
<div
3 changes: 0 additions & 3 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -37,9 +37,6 @@ export default {
merriweather: ['Merriweather', 'sans-serif'],
'proxima-nova': ['proxima-nova', 'sans-serif'],
},
screens: {
md: '720px',
},
},
plugins: [
({ addVariant }) => {

0 comments on commit 375f160

Please sign in to comment.