Merge pull request #21 from nunawa/15-remove-emotion

15 remove emotion
nunawa · May 12, 2024 · c567434 · c567434
2 parents b616a7c + 49640e1
commit c567434
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 801 deletions.
diff --git a/README.md b/README.md
@@ -14,7 +14,6 @@ Frontend source code for online pc builder [jisaku.nunawa.net](https://jisaku.nu
 - [sql.js](https://sql.js.org/#/)
 - [Jotai](https://jotai.org/)
 - [SWR](https://swr.vercel.app/ja)
-- [Emotion](https://emotion.sh/docs/introduction)
 
 ## Run Locally
 

diff --git a/components/ProductList.js b/components/ProductList.js
@@ -1,6 +1,5 @@
-/** @jsxImportSource @emotion/react */
 import { selectedProductsAtom } from "@/jotai/atom";
-import { css } from "@emotion/react";
+import styles from "@/styles/ProductCardLink.module.scss";
 import { useAtom } from "jotai";
 import Link from "next/link";
 import { Button, Card, Container, Spinner, Stack } from "react-bootstrap";
@@ -17,23 +16,10 @@ export default function ProductList({ id, products }) {
         <Card key={iterator.id} className="mb-2">
           <Card.Header as="h5">
             <Stack direction="horizontal">
-              <div
-                className="me-auto"
-                css={css({
-                  overflow: "hidden",
-                  whiteSpace: "nowrap",
-                  maxWidth: "700px",
-                  textOverflow: "ellipsis",
-                })}
-              >
+              <div className={"me-auto " + styles["div"]}>
                 <Link
                   href={"https://kakaku.com/item/" + iterator.id}
-                  css={css({
-                    textDecoration: "none",
-                    "&:hover": {
-                      textDecoration: "underline",
-                    },
-                  })}
+                  className={styles["link"]}
                 >
                   {iterator.manufacturer} {iterator.name}
                 </Link>

diff --git a/components/SelectedProduct.js b/components/SelectedProduct.js
@@ -1,6 +1,5 @@
-/** @jsxImportSource @emotion/react */
 import { selectedProductsAtom } from "@/jotai/atom";
-import { css } from "@emotion/react";
+import styles from "@/styles/ProductCardLink.module.scss";
 import { useAtomValue } from "jotai";
 import Link from "next/link";
 import { Card, Stack } from "react-bootstrap";
@@ -15,33 +14,15 @@ export default function SelectedProduct({ id }) {
       <Card className="mb-3">
         <Card.Header as="h5">
           <Stack direction="horizontal">
-            <div
-              className="me-auto"
-              css={css({
-                overflow: "hidden",
-                whiteSpace: "nowrap",
-                maxWidth: "700px",
-                textOverflow: "ellipsis",
-              })}
-            >
+            <div className={"me-auto " + styles["div"]}>
               <Link
                 href={"https://kakaku.com/item/" + product.id}
-                css={css({
-                  textDecoration: "none",
-                  "&:hover": {
-                    textDecoration: "underline",
-                  },
-                })}
+                className={styles["link"]}
               >
                 {product.manufacturer} {product.name}
               </Link>
             </div>
-            <div
-              className="text-muted ms-2"
-              css={css({ fontWeight: "normal", wordBreak: "keep-all" })}
-            >
-              選択中
-            </div>
+            <div className={"text-muted ms-2 " + styles["status"]}>選択中</div>
           </Stack>
         </Card.Header>
         <Card.Body>