Add new emotion

Author: CodeDoctorDE

components/Button.tsx

@@ -1,24 +1,37 @@
-import React, { ButtonHTMLAttributes, PropsWithChildren } from 'react'
-import classes from '../styles/Button.module.scss';
+import React, { PropsWithChildren } from "react";
+import classes from "../styles/Button.module.scss";
 
-type ButtonProps = PropsWithChildren<React.HTMLAttributes<HTMLButtonElement> & {
-    variant?: 'primary' | 'secondary'
-    size?: 'small' | 'normal' | 'large'
-}>
+type ButtonProps = PropsWithChildren<
+    React.HTMLAttributes<HTMLButtonElement> & {
+        variant?: "primary" | "secondary";
+        size?: "small" | "normal" | "large";
+    }
+>;
 
-export default function Button({variant, className, size, ...props}: ButtonProps) {
-    var currentClass = className ?? '';
-    currentClass += ' ' + classes.btn;
+export default function Button({
+    variant,
+    className,
+    size,
+    ...props
+}: ButtonProps) {
+    var currentClass = className ?? "";
+    currentClass += " " + classes.btn;
+    switch (variant) {
+        case "secondary":
+            currentClass += " " + classes.btnSecondary;
+            break;
+        default:
+            currentClass += " " + classes.btnPrimary;
+            break;
+    }
     switch (size) {
-        case 'small':
-            currentClass += ' ' + classes.btnSmall;
+        case "small":
+            currentClass += " " + classes.btnSmall;
             break;
-        case 'large':
-            currentClass += ' ' + classes.btnLarge;
+        case "large":
+            currentClass += " " + classes.btnLarge;
             break;
     }
-    
-    return (
-        <button className={currentClass} {...props} />
-    )
-}
+
+    return <button className={currentClass} {...props} />;
+}

components/Icon.tsx

@@ -9,15 +9,25 @@ type IconProps = PropsWithChildren<
   }
 >;
 
-export default function Icon({ className, ...props }: IconProps) {
+export default function Icon({ className, children, ...props }: IconProps) {
   return (
     <span
-      className={`material-symbols-outlined ${classes.icon} ${className ?? ""}`}
-      style={{
-        fontSize: props.size ?? 24,
-        color: props.color === "primary" ? variables.primaryColor : "inherit",
-      }}
+      className={`material-symbols-outlined ${className ?? ""}}`}
       {...props}
-    />
+    >
+      <style jsx>
+        {`
+        span {
+          font-size: ${props.size ?? 24}px;
+          user-select: none;
+        }
+        span:hover {
+          cursor: pointer;
+          color: green;
+        }
+      `}
+      </style>
+      {children}
+    </span>
   );
 }

components/Link.tsx

@@ -9,6 +9,14 @@ type LinkProps = PropsWithChildren<React.AnchorHTMLAttributes<HTMLAnchorElement>
 export default function Link({variant, className, size, ...props}: LinkProps) {
     var currentClass = className ?? '';
     currentClass += ' ' + classes.btn;
+    switch (variant) {
+        case "secondary":
+            currentClass += " " + classes.btnSecondary;
+            break;
+        default:
+            currentClass += " " + classes.btnPrimary;
+            break;
+    }
     switch (size) {
         case 'small':
             currentClass += ' ' + classes.btnSmall;

components/NewButton.tsx

@@ -0,0 +1,35 @@
+import styled from '@emotion/styled'
+
+type ButtonProps = {
+    variant?: "primary" | "secondary";
+    size?: "small" | "normal" | "large";
+};
+
+
+const Button = styled.button<ButtonProps>`
+    padding: 0.5rem 4rem;
+    border-radius: 0.8rem;
+    border: 0;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 1.5rem;
+    margin: 0.5rem;
+    text-decoration: none;
+    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+    ${({ variant }) => {
+        switch (variant) {
+            case "secondary":
+                return `
+                    background: #fff;
+                    color: #000;
+                    `;
+            default:
+                return `
+                    background: #000;
+                    color: #fff;
+                    `;
+        }
+    }}
+`;
+
+export default Button;

package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "material-symbols": "^0.2.13",
     "next": "12.3.1",
     "react": "18.2.0",

pages/blog/index.tsx

@@ -22,7 +22,7 @@ export default function Blog() {
                 diam nonumy eirmod tempor invidunt ut labore et dolore magna
                 aliquyam erat, sed diam voluptua. At vero eos et accusam et
               </p>
-              <div><Icon>java</Icon> Java</div>
+              <Flex alignItems="center"><Icon>coffee</Icon> Java</Flex>
               <Link size="small" href="#">
                 Read more
               </Link>

pages/index.tsx

@@ -1,7 +1,7 @@
 import type { NextPage } from "next";
 import Head from "next/head";
 import Image from "next/image";
-import Button from "../components/Button";
+import Button from "../components/NewButton";
 import Icon from "../components/Icon";
 import Card from "../components/layouts/Card";
 import Container from "../components/layouts/Container";
@@ -27,14 +27,18 @@ const Home: NextPage = () => {
           <Text variant="caption">
             Dem größten Programmier-Discord im deutschsprachigen Raum!
           </Text>
-          <Link href="https://invite.programm-chest.dev" variant="primary">Join</Link>
+          <Button variant="primary">Join</Button>
+          <Flex>
+            <Link href="https://invite.programm-chest.dev" variant="primary">Join</Link>
+            <Link href="https://invite.programm-chest.dev" variant="secondary">Erkunden</Link>
+          </Flex>
         </Container>
 
         <Flex alignItems="stretch" flexWrap="wrap" justifyContent="center" gap={12}>
           <Card title="Hilfsbereite Community" icon="live_help">
             Da wir viele Programmierer aus den unterschiedlichsten Bereichen und Themengebieten bei uns versammeln, wird sich sicherlich jemand finden, der die passende Lösung für dein Problem bereithält
           </Card>
-          
+
           <Card title="Erfahrung" icon="schedule">
             Seit nun mehr als 3 Jahren kümmert sich unser Team gemeinsam mit unserer Community um Anliegen anderer Mitglieder.
           </Card>

styles/Button.module.scss

@@ -1,37 +1,45 @@
 @use "colors";
 
-$button-color: (
-    "primary": colors.$primary,
-    "secondary": transparent
-);
-
 .btn {
-    padding: 0.5rem 4rem;
-    border-radius: 0.8rem;
-    border: 0;
+  padding: 0.5rem 4rem;
+  border-radius: 0.8rem;
+  border: 0;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 1.5rem;
+  margin: 0.5rem;
+  text-decoration: none;
+  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
+.btnPrimary {
+  color: colors.$text;
+  background: colors.$primary;
+  border: 4px solid colors.$primary;
+  &:hover {
+    background: colors.$text;
     color: colors.$primary;
-    background: transparent;
-    cursor: pointer;
-    border: 4px solid colors.$primary;
-    font-weight: 500;
-    font-size: 1.5rem;
-    margin: 0.5rem;
-    text-decoration: none;
-    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
-    &:hover {
-        background: colors.$primary;
-        color: colors.$text;
-    }
+  }
+}
+
+.btnSecondary {
+  color: colors.$primary;
+  background: transparent;
+  border: 4px solid colors.$primary;
+  &:hover {
+    background: colors.$primary;
+    color: colors.$text;
+  }
 }
 
 .btnSmall {
-    padding: 0.5rem 2rem;
-    font-size: 1rem;
-    border-width: 2px;
+  padding: 0.5rem 2rem;
+  font-size: 1rem;
+  border-width: 2px;
 }
 
 .btnLarge {
-    padding: 0.5rem 6rem;
-    font-size: 2rem;
-    border-width: 6px;
+  padding: 0.5rem 6rem;
+  font-size: 2rem;
+  border-width: 6px;
 }

styles/Navbar.module.scss

@@ -24,13 +24,20 @@
     color: colors.$text;
     text-decoration: none;
     font-weight: 600;
-    padding-bottom: 0.1rem;
+    padding-bottom: 0.2rem;
+    &:hover {
+        border-bottom: 0.2rem solid colors.$text;
+        padding-bottom: 0;
+    }
 }
 .navbarCurrentLink {
     color: colors.$primary;
     text-decoration: none;
-    border-bottom: 0.1rem solid colors.$primary;
+    border-bottom: 0.2rem solid colors.$primary;
     padding-bottom: 0;
+    &:hover {
+        border-bottom: 0.2rem solid colors.$primary;
+    }
 }
 
 .navbarMenu {

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -12,9 +16,16 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "incremental": true,
     "jsx": "preserve",
-    "incremental": true
+    "jsxImportSource": "@emotion/react"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }