-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
688 additions
and
55 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| { | ||
| "$schema": "https://ui.shadcn.com/schema.json", | ||
| "style": "default", | ||
| "rsc": false, | ||
| "tsx": true, | ||
| "tailwind": { | ||
| "config": "tailwind.config.ts", | ||
| "css": "src/styles/globals.css", | ||
| "baseColor": "slate", | ||
| "cssVariables": true, | ||
| "prefix": "" | ||
| }, | ||
| "aliases": { | ||
| "components": "@/components", | ||
| "utils": "@/lib/utils" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'; | ||
|
|
||
| const Collapsible = CollapsiblePrimitive.Root; | ||
|
|
||
| const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger; | ||
|
|
||
| const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent; | ||
|
|
||
| export { Collapsible, CollapsibleTrigger, CollapsibleContent }; |
5 changes: 5 additions & 0 deletions
5
...c/containers/analysis-eudr/category-list/breakdown/deforestation-free-suppliers/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| const DeforestationFreeSuppliersBreakdown = () => { | ||
| return <div>DeforestationFreeSuppliersBreakdown</div>; | ||
| }; | ||
|
|
||
| export default DeforestationFreeSuppliersBreakdown; |
5 changes: 5 additions & 0 deletions
5
...iners/analysis-eudr/category-list/breakdown/suppliers-with-deforestation-alerts/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| const SuppliersWithDeforestationAlertsBreakdown = () => { | ||
| return <div>SuppliersWithDeforestationAlertsBreakdown</div>; | ||
| }; | ||
|
|
||
| export default SuppliersWithDeforestationAlertsBreakdown; |
5 changes: 5 additions & 0 deletions
5
...ontainers/analysis-eudr/category-list/breakdown/suppliers-with-no-location-data/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| const SuppliersWithNoLocationDataBreakdown = () => { | ||
| return <div>SuppliersWithNoLocationData</div>; | ||
| }; | ||
|
|
||
| export default SuppliersWithNoLocationDataBreakdown; |
101 changes: 101 additions & 0 deletions
101
client/src/containers/analysis-eudr/category-list/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import { useState } from 'react'; | ||
|
|
||
| import DeforestationFreeSuppliersBreakdown from './breakdown/deforestation-free-suppliers'; | ||
| import SuppliersWithDeforestationAlertsBreakdown from './breakdown/suppliers-with-deforestation-alerts'; | ||
| import SuppliersWithNoLocationDataBreakdown from './breakdown/suppliers-with-no-location-data'; | ||
|
|
||
| import { Button } from '@/components/button'; | ||
| import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'; | ||
| import { formatPercentage } from '@/utils/number-format'; | ||
|
|
||
| const CATEGORIES = [ | ||
| { | ||
| name: 'Deforestation-free suppliers', | ||
| slug: 'deforestation-free-suppliers', | ||
| color: 'bg-[#4AB7F3]', | ||
| // todo move this value field to the component | ||
| value: 0.3, | ||
| }, | ||
| { | ||
| name: 'Suppliers with deforestation alerts', | ||
| slug: 'suppliers-with-deforestation-alerts', | ||
| color: 'bg-[#FFC038]', | ||
| // todo move this value field to the component | ||
| value: 0.6, | ||
| }, | ||
| { | ||
| name: 'Suppliers with no location data', | ||
| slug: 'suppliers-with-no-location-data', | ||
| color: 'bg-[#8460FF]', | ||
| // todo move this value field to the component | ||
| value: 0.1, | ||
| }, | ||
| ] as const; | ||
|
|
||
| type CategoryState = Record<(typeof CATEGORIES)[number]['slug'], boolean>; | ||
|
|
||
| export const CategoryList = (): JSX.Element => { | ||
| const [categories, toggleCategory] = useState<CategoryState>( | ||
| CATEGORIES.reduce( | ||
| (acc, category) => ({ | ||
| ...acc, | ||
| [category.slug]: false, | ||
| }), | ||
| {} as CategoryState, | ||
| ), | ||
| ); | ||
| const categoriesWithValues = CATEGORIES.map((category) => ({ | ||
| ...category, | ||
| // todo: calculate value field here | ||
| })); | ||
|
|
||
| return ( | ||
| <> | ||
| {categoriesWithValues.map((category) => ( | ||
| <Collapsible | ||
| key={category.slug} | ||
| className="rounded-xl bg-gray-50 p-5" | ||
| onOpenChange={() => { | ||
| toggleCategory((prev) => ({ | ||
| ...prev, | ||
| [category.slug]: !prev[category.slug], | ||
| })); | ||
| }} | ||
| > | ||
| <div className="flex w-full items-center space-x-6"> | ||
| <div className="flex-1 text-left">{category.name}</div> | ||
| <div className="shrink-0 grow-0"> | ||
| <div> | ||
| {formatPercentage(category.value)} <span className="text-xs">of suppliers</span> | ||
| </div> | ||
| <div className="h-[2px] w-[340px] bg-gray-200"> | ||
| <div | ||
| className={`h-[2px] ${category.color}`} | ||
| style={{ width: formatPercentage(category.value) }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <CollapsibleTrigger asChild> | ||
| <Button type="button" size="xs" variant="white"> | ||
| {categories[category.slug] ? 'Close details' : 'View details'} | ||
| </Button> | ||
| </CollapsibleTrigger> | ||
| </div> | ||
| <CollapsibleContent> | ||
| {category.slug === 'deforestation-free-suppliers' && ( | ||
| <DeforestationFreeSuppliersBreakdown /> | ||
| )} | ||
| {category.slug === 'suppliers-with-deforestation-alerts' && ( | ||
| <SuppliersWithDeforestationAlertsBreakdown /> | ||
| )} | ||
| {category.slug === 'suppliers-with-no-location-data' && ( | ||
| <SuppliersWithNoLocationDataBreakdown /> | ||
| )} | ||
| </CollapsibleContent> | ||
| </Collapsible> | ||
| ))} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default CategoryList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { type ClassValue, clsx } from 'clsx'; | ||
| import { twMerge } from 'tailwind-merge'; | ||
|
|
||
| export function cn(...inputs: ClassValue[]) { | ||
| return twMerge(clsx(inputs)); | ||
| } |
Oops, something went wrong.