From 9d15df40dda2fd6fd2a1713afe9e19890cd938e8 Mon Sep 17 00:00:00 2001 From: literat Date: Sat, 14 Sep 2024 15:37:54 +0200 Subject: [PATCH] Feat(examples): Add Collapse component to test problem with window in resize observer refs #DS-1465 --- .../next-with-app-router/src/app/page.tsx | 38 ++++++++++++++++++- .../src/pages/index.tsx | 36 +++++++++++++++++- 2 files changed, 70 insertions(+), 4 deletions(-) diff --git a/examples/next-with-app-router/src/app/page.tsx b/examples/next-with-app-router/src/app/page.tsx index 367b25b8ad..47a5cec72e 100644 --- a/examples/next-with-app-router/src/app/page.tsx +++ b/examples/next-with-app-router/src/app/page.tsx @@ -1,6 +1,40 @@ -import { Heading } from '@lmc-eu/spirit-web-react'; +'use client'; + +import { Button, Collapse, Heading, useCollapse } from '@lmc-eu/spirit-web-react'; import { NextPage } from 'next'; -const Home: NextPage = () => Spirit App Router; +const CollapseTrigger = ({ isOpen, ...rest }: any) => { + return ; +}; + +const Home: NextPage = () => { + const { isOpen, toggleHandler } = useCollapse(false); + + return ( +
+ Spirit App Router + + +

+ Condimentum odio, pulvinar et sollicitudin accumsan ac hendrerit vestibulum commodo, molestie laoreet dui sit + amet. Molestie consectetur, sed ac felis scelerisque lectus accumsan purus id dolor sed vitae, praesent + aliquam dolor quis ornare. Nulla sit amet, rhoncus at quis odio et iaculis lacinia suscipit vivamus sodales, + nunc id condimentum felis. Consectetur nec commodo, praesent et elit magna purus molestie cursus molestie, + libero ut venenatis erat id et nisi. Quam posuere, aliquam quam leo vitae tellus semper eget nunc, ultricies + adipiscing sit amet accumsan. Lorem rutrum, porttitor ante mauris suspendisse ultricies consequat purus, + congue a commodo magna et. +

+

+ Nunc potenti, mauris sollicitudin purus augue justo et condimentum, vivamus a ornare consequat. Aliquet ut, + metus libero vitae volutpat felis a iaculis sapien dolor quis, augue fermentum donec urna. Sem facilisis, + finibus non mauris suspendisse varius et nisi egestas potenti, praesent interdum nulla sem. Sodales dui, quam + sagittis sapien elit lorem fringilla hendrerit nunc, porttitor quis dolor ut sit amet. Scelerisque aliquet, + maximus integer cursus fusce vitae proin lacinia sed vitae, bibendum suspendisse nunc ut enim et at. Sem + turpis, iaculis a eget non mauris nulla vitae augue, molestie porttitor luctus bibendum. +

+
+
+ ); +}; export default Home; diff --git a/examples/next-with-pages-router/src/pages/index.tsx b/examples/next-with-pages-router/src/pages/index.tsx index 7d4bb4584a..1321e34589 100644 --- a/examples/next-with-pages-router/src/pages/index.tsx +++ b/examples/next-with-pages-router/src/pages/index.tsx @@ -1,5 +1,37 @@ -import { Heading } from '@lmc-eu/spirit-web-react'; +import { Button, Collapse, Heading, useCollapse } from '@lmc-eu/spirit-web-react'; -const Home = () => Spirit Pages App; +const CollapseTrigger = ({ isOpen, ...rest }: any) => { + return ; +}; + +const Home = () => { + const { isOpen, toggleHandler } = useCollapse(false); + + return ( +
+ Spirit Pages App + + +

+ Condimentum odio, pulvinar et sollicitudin accumsan ac hendrerit vestibulum commodo, molestie laoreet dui sit + amet. Molestie consectetur, sed ac felis scelerisque lectus accumsan purus id dolor sed vitae, praesent + aliquam dolor quis ornare. Nulla sit amet, rhoncus at quis odio et iaculis lacinia suscipit vivamus sodales, + nunc id condimentum felis. Consectetur nec commodo, praesent et elit magna purus molestie cursus molestie, + libero ut venenatis erat id et nisi. Quam posuere, aliquam quam leo vitae tellus semper eget nunc, ultricies + adipiscing sit amet accumsan. Lorem rutrum, porttitor ante mauris suspendisse ultricies consequat purus, + congue a commodo magna et. +

+

+ Nunc potenti, mauris sollicitudin purus augue justo et condimentum, vivamus a ornare consequat. Aliquet ut, + metus libero vitae volutpat felis a iaculis sapien dolor quis, augue fermentum donec urna. Sem facilisis, + finibus non mauris suspendisse varius et nisi egestas potenti, praesent interdum nulla sem. Sodales dui, quam + sagittis sapien elit lorem fringilla hendrerit nunc, porttitor quis dolor ut sit amet. Scelerisque aliquet, + maximus integer cursus fusce vitae proin lacinia sed vitae, bibendum suspendisse nunc ut enim et at. Sem + turpis, iaculis a eget non mauris nulla vitae augue, molestie porttitor luctus bibendum. +

+
+
+ ); +}; export default Home;