メンバー一覧ページの背景を作りました

view/next-project/src/components/common/GlassFolderCard.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+
+type CardContentsProps = {
+  width?: string;
+  height?: string;
+  align?: string;
+  justify?: string;
+  gap?: string;
+  padding?: string;
+  children: React.ReactNode;
+  background?: string;
+};
+
+function GlassFolderCard(props: CardContentsProps): JSX.Element {
+  const GlassFolderTab = styled.div`
+    width: 150px; /* 幅 */
+    height: 100px;
+    border-bottom: 100px 
+    border-left: 25px 
+    border-right: 25px 
+    box-sizing: border-box;
+    background: 'radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4))'} 
+    border-top: solid 1px #505050;
+  `;
+  const GlassCardContainer = styled.div`
+    width: ${props.width};
+    height: ${props.height};
+    padding: ${props.padding || '18px 22px'};
+    background: ${props.background ||
+    'radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4))'};
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(4px);
+    flex-grow: 1;
+    display: flex;
+    flex-flow: column;
+    align-items: ${props.align || 'start'};
+    justify-content: ${props.justify || 'start'};
+    gap: ${props.gap || '0px'};
+    font-size: 16px;
+    flex: none;
+
+  `;
+
+
+  return (
+    <>
+      <GlassCardContainer>{props.children}</GlassCardContainer>
+    </>
+  );
+}
+
+export default GlassFolderCard;

view/next-project/src/components/common/UsersBackgroundAnimation/UsersBackgroundAnimation.module.css

@@ -0,0 +1,5 @@
+.BackgroundAnimationContainer{
+  background-size: contain;
+  position: relative;
+  width: 100%;
+}

view/next-project/src/components/common/UsersBackgroundAnimation/UsersBackgroundAnimation.tsx

@@ -0,0 +1,138 @@
+import React, {useCallback} from 'react'
+import type { Engine } from "tsparticles-engine";
+import Particles from 'react-particles'
+import { loadFull } from "tsparticles";
+import s from './UsersBackgroundAnimation.module.css'
+
+const UserBackgroundAnimation = () => {
+
+const particlesInit = useCallback(async (engine: Engine) => {
+  await loadFull(engine);
+}, []);
+
+  return (
+    <div className={s.BackgroundAnimationContainer}>
+       {/* react-particles-jsで雪を表現しています */}
+       <Particles
+            id="tsparticles"
+            init={particlesInit}
+            options={{
+              background: {
+                color: {
+                    value: "#FFF9F5",
+                },
+            },
+              "particles": {
+                "number": {
+                  "value": 15,
+                  "density": {
+                    "enable": true,
+                    "value_area": 1262.6362266116362
+                  }
+                },
+                "color": {
+                  "value": "#fff"
+                },
+                "shape": {
+                  "type": "image",
+                  "stroke": {
+                    "width": 0,
+                    "color": "#000000"
+                  },
+
+                  "image": {
+                    "src": "Union.svg",
+                    "width": 200,
+                    "height": 200
+                  }
+                },
+                "opacity": {
+                  "value": 1,
+                  "random": false,
+                  "anim": {
+                    "enable": false,
+                    "speed": 1,
+                    "opacity_min": 0.1,
+                    "sync": false
+                  }
+                },
+                "size": {
+                  "value": 150,
+                  "random": false,
+                  "anim": {
+                    "enable": false,
+                    "speed": 40,
+                    "size_min": 0.1,
+                    "sync": true
+                  }
+                },
+                "line_linked": {
+                  "enable": false,
+                  "distance": 256.54592973848366,
+                  "color": "#ffffff",
+                  "opacity": 0.4,
+                  "width": 2
+                },
+                "move": {
+                  "enable": true,
+                  "speed": 6,
+                  "direction": "bottom",
+                  "random": false,
+                  "straight": true,
+                  "out_mode": "out",
+                  "bounce": false,
+                  "attract": {
+                    "enable": false,
+                    "rotateX": 600,
+                    "rotateY": 1200
+                  }
+                }
+              },
+              "interactivity": {
+                "detect_on": "canvas",
+                "events": {
+                  "onhover": {
+                    "enable": false,
+                    "mode": "bubble"
+                  },
+                  "onclick": {
+                    "enable": false,
+                    "mode": "repulse"
+                  },
+                  "resize": true
+                },
+                "modes": {
+                  "grab": {
+                    "distance": 400,
+                    "line_linked": {
+                      "opacity": 0.5
+                    }
+                  },
+                  "bubble": {
+                    "distance": 400,
+                    "size": 4,
+                    "duration": 0.3,
+                    "opacity": 1,
+                    "speed": 3
+                  },
+                  "repulse": {
+                    "distance": 200,
+                    "duration": 0.4
+                  },
+                  "push": {
+                    "particles_nb": 4
+                  },
+                  "remove": {
+                    "particles_nb": 2
+                  }
+                }
+              },
+              "retina_detect": true
+            }}
+        />
+
+    </div>
+  )
+}
+
+export default UserBackgroundAnimation

view/next-project/src/components/common/UsersBackgroundAnimation/index.ts

@@ -0,0 +1 @@
+export { default } from './UsersBackgroundAnimation';

view/next-project/src/components/icons/AccountCircle.tsx

@@ -1,3 +1,4 @@
+import { relative } from 'path';
 import styled from 'styled-components';
 
 type Props = {

view/next-project/src/components/layout/UsersLayout/UsersLayout.module.css

@@ -0,0 +1,22 @@
+.userLayoutContainer {
+  width: 100%;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  padding: 100px 200px;
+  margin-top: 60px;
+  gap: 50px 0px;
+  animation: fadeIn 0.5s ease 0s 1 alternate none running;
+  background-color: #FFF9F5;
+}
+
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

view/next-project/src/components/layout/UsersLayout/UsersLayout.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import Header from '@components/common/Header';
+import s from './UsersLayout.module.css';
+import styled from 'styled-components';
+
+interface LayoutProps {
+  children?: React.ReactNode;
+}
+
+const UsersLayout: FC<LayoutProps> = (props) => {
+  return (
+    <>
+      <Header />
+      <section>
+        <main className={s.UserLayoutContainer}>{props.children}</main>
+          <div>
+
+          </div>
+      </section>
+    </>
+  );
+};
+
+
+
+
+
+
+
+export default UsersLayout;

view/next-project/src/components/layout/UsersLayout/index.ts

@@ -0,0 +1 @@
+export { default } from './UsersLayout';