diff --git a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js b/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js
index f5ee618a..7545a4f4 100644
--- a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js
+++ b/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js
@@ -1,21 +1,179 @@
import React from 'react'
import SlurCardBubble from './SlurCardBubble';
import {
- Card, CardBody, CardFooter, CardHeader, List,
- Text,
+ Card, CardBody, CardFooter,
Box,
- Button,
Anchor,
+ Table,
+ TableRow,
+ TableCell,
+ Text,
} from 'grommet';
-
+import { Alert, FormUp, FormDown } from 'grommet-icons';
const SlurCardComponent = ({ data }) => {
+ const isDataEmpty =
+ !data.levelOfSeverity ||
+ data.casual === undefined ||
+ data.appropriated === undefined ||
+ data.categories.length === 0;
+
+ const [showMore, setShowMore] = React.useState(false);
+ const toggleShowMore = () => {
+ setShowMore(!showMore);
+ };
+ const buttonLabel = showMore ? 'See Less' : 'See More';
+ const buttonIcon = showMore ? : ;
+
return (
- Header
- Body
+
+ {isDataEmpty ? (
+
+
+
+
+ Add metadata for the slur
+
+ ) : (
+
+
+
+
+
+ Level of Severity
+
+
+
+ {data.levelOfSeverity}
+
+
+
+
+ Casual
+
+
+ {data.casual === true
+ ? 'Yes'
+ : data.casual === false
+ ? 'No'
+ : ''}
+
+
+
+
+
+ Appropriated
+
+
+
+ {data.appropriated === true
+ ? 'Yes'
+ : data.appropriated === false
+ ? 'No'
+ : ''}
+
+
+ {showMore && (
+ <>
+
+
+
+ If, Appropriated, Is it by
+ Community or Others?
+
+
+
+ {data.appropriationContext === true
+ ? 'Community'
+ : data.appropriationContext ===
+ false
+ ? 'Others'
+ : ''}
+
+
+
+
+
+ What Makes it Problematic?
+
+
+
+
+
+ {data.labelMeaning}
+
+
+
+
+
+
+
+ Categories
+
+
+
+ {
+
+ {data.categories.map(
+ (
+ category,
+ categoryIndex
+ ) => (
+
+
+
+ )
+ )}
+
+ }
+
+
+
+ )}
+
+
+ )}
+
+
+
+
- )
+ );
}
export default SlurCardComponent
\ No newline at end of file
diff --git a/browser-extension/plugin/src/ui-components/pages/Slur.jsx b/browser-extension/plugin/src/ui-components/pages/Slur.jsx
index 5ee2ddff..b661c680 100644
--- a/browser-extension/plugin/src/ui-components/pages/Slur.jsx
+++ b/browser-extension/plugin/src/ui-components/pages/Slur.jsx
@@ -4,8 +4,8 @@ import { Add, Edit, Trash } from 'grommet-icons';
import { useNavigate } from 'react-router-dom';
import Api from './Api';
import { UserContext, NotificationContext } from '../atoms/AppContext';
-import SlurCard from '../atoms/SlurCard';
-// import SlurCardComponent from '../atoms/SlurCardComponent';
+// import SlurCard from '../atoms/SlurCard';
+import SlurCard from '../atoms/SlurCardComponent';
const { getSlurAndCategory, deleteSlurAndCategory } = Api;
@@ -56,7 +56,7 @@ export function Slur() {
}, []);
return (
-
+
{isLoading ? (