+ React Native Screens is directly used in the React Navigation and Expo + Router libraries, some of the most popular libraries in the React + Native ecosystem. That's why nearly every second project uses React + Native Screens in React Native applications. +
+
+ 
+ Learn more about the new architecture in React Native Screens.
+{content}
+โ{children}โ
+ + ); +}; + +export default TestimonialItem; diff --git a/docs/src/components/Testimonials/TestimonialItem/styles.module.css b/docs/src/components/Testimonials/TestimonialItem/styles.module.css new file mode 100644 index 0000000000..80a64f7f57 --- /dev/null +++ b/docs/src/components/Testimonials/TestimonialItem/styles.module.css @@ -0,0 +1,111 @@ +.testimonialItem { + background-color: var(--swm-off-white); + box-shadow: -12px 12px 0px var(--swm-navy-light-60); + padding: 1.5em; + position: relative; + width: 100%; + display: flex; + gap: 1rem; + flex-direction: column; + /* max width of tile minus gap of parent */ + max-width: calc(50% - 3.5rem / 2); + transition: 0.2s ease-in-out; +} + +@media (max-width: 996px) { + .testimonialItem { + max-width: 100%; + min-height: 0; + } +} +.testimonialItem:hover { + text-decoration: none; + background-color: var(--swm-navy-light-10); + box-shadow: -12px 12px 0px var(--swm-navy-light-80); +} + +.testimonialItem:hover .testimonialAuthorPhoto { + background-color: black; +} +.testimonialItem:hover .testimonialAuthorPhoto > img { + opacity: 0.8; +} + +.testimonialBody { + margin: 0; +} + +.quoteIcon { + position: absolute; + right: 0; + top: 0; + transform: translate(10%, -20%); +} + +@media (max-width: 420px) { + .quoteIcon { + scale: 0.8; + transform: translate(30%, -40%); + } +} + +[data-theme='dark'] .testimonialItem { + background-color: var(--swm-navy-light-10); +} +[data-theme='dark'] .testimonialItem:hover { + background-color: var(--swm-navy-dark-20); +} + +[data-theme='dark'] .testimonialAuthorName, +[data-theme='dark'] .testimonialBody { + color: var(--swm-navy-light-100); +} + +.testimonialAuthor { + display: flex; + flex-direction: row; + gap: 1rem; +} + +.testimonialAuthorInfo { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.testimonialAuthorName { + font-size: 20px; + font-weight: 600; +} + +.testimonialAuthorPhoto { + flex-shrink: 0; + background-color: black; +} + +.testimonialAuthorPhoto, +.testimonialAuthorPhoto > img { + border-radius: 50%; + width: 4rem; + height: 4rem; +} + +.testimonialAuthorPhoto > img { + object-fit: cover; + opacity: 1; + transition: 0.2s ease-in-out; + object-position: top center; +} + +.testimonialCompany { + font-weight: 500; + font-size: 14px; + color: var(--swm-navy-light-60); + text-transform: uppercase; +} + +@media (max-width: 420px) { + .featureTitle { + font-size: 20px; + } +} diff --git a/docs/src/components/Testimonials/TestimonialList/index.tsx b/docs/src/components/Testimonials/TestimonialList/index.tsx new file mode 100644 index 0000000000..2a008f021c --- /dev/null +++ b/docs/src/components/Testimonials/TestimonialList/index.tsx @@ -0,0 +1,129 @@ +import React, { useState, useEffect } from 'react'; +import clsx from 'clsx'; +import styles from './styles.module.css'; +import TestimonialItem from '@site/src/components/Testimonials/TestimonialItem'; + +const items = [ + { + author: 'Test author', + company: 'Test', + body: 'Screens are the best ever and ever - I love using it!', + link: 'https://test.com/', + image: { + alt: 'test', + src: '/img/logo.svg', + }, + }, + { + author: 'Test author', + company: 'Test', + body: 'Screens are the best ever and ever - I love using it!', + link: 'https://test.com/', + image: { + alt: 'test', + src: '/img/logo.svg', + }, + }, + { + author: 'Test author', + company: 'Test', + body: 'Screens are the best ever and ever - I love using it!', + link: 'https://test.com/', + image: { + alt: 'test', + src: '/img/logo.svg', + }, + }, +]; + +const TestimonialList = () => { + const [activeIndex, setActiveIndex] = useState(0); + + useEffect(() => { + const updateHeight = () => { + const testimonialContainer = document.querySelector