feature: persona list redising

felipevogtf · Feb 25, 2024 · e11f152 · e11f152
1 parent ed34f7d
commit e11f152
Show file tree

Hide file tree

Showing 2 changed files with 193 additions and 33 deletions.
diff --git a/src/components/PersonaList/PersonaList.css b/src/components/PersonaList/PersonaList.css
@@ -1,4 +1,52 @@
-.persona-card {
+.persona-search {
+  position: relative;
+  box-sizing: border-box;
+  text-decoration: none;
+  height: 70px;
+  padding: 5px 20px;
+}
+
+.persona-search__background {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  padding: 5px;
+  transform: skew(-3deg, -0.3deg);
+  z-index: 0;
+}
+
+.persona-search__background2 {
+  background-color: black;
+  transform: skew(2deg, 0.2deg);
+  width: 100%;
+  height: 100%;
+}
+
+.persona-search input {
+  position: relative;
+  border: none;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  background: none;
+  z-index: 1;
+  color: white;
+}
+
+.persona-search input:focus {
+  outline: none;
+}
+
+.persona-search:focus-within .persona-search__background,
+.persona-search:hover .persona-search__background {
+  background-color: red;
+}
+
+/* .persona-card {
   box-sizing: border-box;
 
   display: flex;
@@ -38,37 +86,135 @@
   filter: grayscale(0%) brightness(100%) hue-rotate(0deg);
 }
 
-.persona-search {
+
+
+.persona-card2 {
   box-sizing: border-box;
-  position: relative;
-  padding: 0px 10px;
+  background-color: white;
+
+  padding: 6px;
   width: 100%;
-  height: 50px;
-  background: white;
-  border: solid 5px white;
-  border-radius: 15px;
-  border-top-left-radius: 255px 15px;
-  border-top-right-radius: 15px 225px;
-  border-bottom-right-radius: 225px 15px;
-  border-bottom-left-radius: 15px 255px;
-  box-shadow: 1px 1px 0 5px black;
 
-  transition: box-shadow ease-in-out 200ms;
+  transform: skew(5deg, 1deg);
 }
 
-.persona-search input {
-  border: none;
+.test {
+  width: 100%;
+  height: 100%;
   box-sizing: border-box;
+  margin: auto;
+  background-color: black;
+  transform: skew(-1deg, 0deg);
+  color: white;
+  text-wrap: pretty;
+  font-weight: bold;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+
+  padding: 10px;
+}
+
+.test img,
+span {
+  background: red;
+  transform: skew(-4deg, -1deg);
+}
+
+.persona-card2:hover .test span {
+  animation: not-deform-text 1s ease-in-out infinite alternate;
+}
+
+.persona-card2:hover .test img {
+  animation: not-deform 1s ease-in-out infinite alternate;
+}
+
+.persona-card2:hover {
+  animation: deform 1s ease-in-out infinite alternate;
+}
+.persona-card2:hover .test {
+  animation: deform2 1s ease-in-out infinite alternate;
+} */
+
+.persona-card {
+  position: relative;
+  box-sizing: border-box;
+  text-decoration: none;
+}
+
+.persona-card__background {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
-  background: none;
+  background-color: white;
+  padding: 5px;
+  transform: skew(5deg, 1deg);
+  transition: background-color ease-in-out 200ms;
+  animation-fill-mode: forwards;
+  animation: deform 2000ms linear infinite alternate;
+  animation-play-state: paused;
 }
 
-.persona-search input:focus {
-  outline: none;
+.persona-card__background2 {
+  background-color: black;
+  transform: skew(-1deg, 0deg);
+  width: 100%;
+  height: 100%;
+  animation-fill-mode: forwards;
+  animation: deform2 1500ms linear infinite alternate;
+  animation-play-state: paused;
+}
+
+.persona-card__content {
+  box-sizing: border-box;
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 10px 20px;
+
+  color: white;
+  font-weight: bold;
+  text-wrap: pretty;
+}
+
+.persona-card__content img {
+  filter: grayscale(100%) brightness(100%) hue-rotate(0deg);
+  transition: filter ease-in-out 200ms;
+}
+
+.persona-card:hover .persona-card__content img {
+  filter: grayscale(0%) brightness(100%) hue-rotate(0deg);
+}
+
+.persona-card:hover .persona-card__background {
+  background-color: red;
+  animation-play-state: running;
+}
+.persona-card:hover .persona-card__background2 {
+  animation-play-state: running;
+}
+
+@keyframes deform {
+  0% {
+    transform: skew(5deg, 1deg);
+  }
+  100% {
+    transform: skew(3deg, 1deg);
+  }
 }
 
-.persona-search:focus-within,
-.persona-search:hover {
-  box-shadow: 1px 1px 0 5px red;
+@keyframes deform2 {
+  0% {
+    transform: skew(-1deg, 0deg);
+  }
+  100% {
+    transform: skew(-2deg, -1deg);
+  }
 }
diff --git a/src/components/PersonaList/PersonaList.tsx b/src/components/PersonaList/PersonaList.tsx
@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 import type { Personas } from '@models/persona.model';
 import './PersonaList.css';
+import { getBaseUrl } from '@utils/baseUrl';
 
 interface PersonaListProps {
   data: Personas;
@@ -25,6 +26,10 @@ export function PersonaList({ data }: PersonaListProps) {
   return (
     <>
       <div className="persona-search" onClick={handleContainerClick}>
+        <div className="persona-search__background">
+          <div className="persona-search__background2"></div>
+        </div>
+
         <input
           ref={inputRef}
           type="text"
@@ -40,21 +45,30 @@ export function PersonaList({ data }: PersonaListProps) {
           gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
           gap: '20px',
           marginTop: '20px',
+          padding: '0 20px',
         }}
       >
         {filteredKeys.map(key => (
           <a href={`./persona/${key}`} className="persona-card" key={key}>
-            <span className="persona-card__title">{key}</span>
-            <img
-              src={import.meta.env.BASE_URL + data[key].img}
-              alt={key}
-              loading="lazy"
-              style={{
-                maxWidth: '100%',
-                height: '200px',
-                objectFit: 'contain',
-              }}
-            />
+            <div className="persona-card__background">
+              <div className="persona-card__background2"></div>
+            </div>
+
+            <div className="persona-card__content">
+              <span className="persona-card__title">{key}</span>
+              <img
+                src={getBaseUrl() + data[key].img}
+                alt={key}
+                loading="lazy"
+                style={{
+                  boxsizing: 'border-box',
+                  maxWidth: '100%',
+                  height: '200px',
+                  objectFit: 'contain',
+                  aspectRatio: '1/1',
+                }}
+              />
+            </div>
           </a>
         ))}
       </section>