Extract WordCard changes to other pr

sillsdev · Feb 21, 2024 · cabc225 · cabc225
1 parent e079108
commit cabc225
Showing 1 changed file with 29 additions and 36 deletions.
diff --git a/src/components/WordCard/index.tsx b/src/components/WordCard/index.tsx
@@ -3,7 +3,6 @@ import {
   Badge,
   Card,
   CardContent,
-  CardHeader,
   IconButton,
   Typography,
 } from "@mui/material";
@@ -43,45 +42,39 @@ export default function WordCard(props: WordCardProps): ReactElement {
     }
   }, [editedBy, provenance]);
 
-  /* Vernacular */
-  const title = (
-    <TypographyWithFont variant="h5" vernacular>
-      {word.vernacular}
-    </TypographyWithFont>
-  );
-
-  /* Icons/buttons beside vernacular */
-  const action = (
-    <>
-      {/* Condensed audio, note, flag */}
-      {!full && (
-        <>
-          <AudioSummary count={audio.length} />
-          {!!note.text && <EntryNote noteText={note.text} />}
-          {flag.active && <FlagButton flag={flag} />}
-        </>
-      )}
-      {/* Button for expand/condense */}
-      <IconButtonWithTooltip
-        buttonId={buttonIdFull(word.id)}
-        icon={
-          full ? (
-            <CloseFullscreen sx={{ color: (t) => t.palette.grey[900] }} />
-          ) : (
-            <OpenInFull sx={{ color: (t) => t.palette.grey[600] }} />
-          )
-        }
-        onClick={() => setFull(!full)}
-      />
-    </>
-  );
-
   return (
     <Card
       sx={{ backgroundColor: (t) => t.palette.grey[300], minWidth: "200px" }}
     >
-      <CardHeader action={action} title={title} />
-      <CardContent>
+      <CardContent sx={{ position: "relative" }}>
+        {/* Vernacular */}
+        <TypographyWithFont variant="h5" vernacular>
+          {word.vernacular}
+        </TypographyWithFont>
+
+        <div style={{ position: "absolute", right: 0, top: 0 }}>
+          {/* Condensed audio, note, flag */}
+          {!full && (
+            <>
+              <AudioSummary count={audio.length} />
+              {!!note.text && <EntryNote noteText={note.text} />}
+              {flag.active && <FlagButton flag={flag} />}
+            </>
+          )}
+          {/* Button for expand/condense */}
+          <IconButtonWithTooltip
+            buttonId={buttonIdFull(word.id)}
+            icon={
+              full ? (
+                <CloseFullscreen sx={{ color: (t) => t.palette.grey[900] }} />
+              ) : (
+                <OpenInFull sx={{ color: (t) => t.palette.grey[600] }} />
+              )
+            }
+            onClick={() => setFull(!full)}
+          />
+        </div>
+
         {/* Expanded audio, note, flag */}
         {full && (
           <>