feat: skeleton animation, animation typo rename

lovrozagar · Jun 28, 2024 · 9036bd8 · 9036bd8
1 parent 50d2850
commit 9036bd8
Show file tree

Hide file tree

Showing 20 changed files with 113 additions and 1,774 deletions.
diff --git a/app.tsx b/app.tsx
@@ -11,15 +11,16 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
+  Skeleton,
   Toaster,
   toastError,
 } from '@/components'
 import React from 'react'
 
 const App = () => {
   return (
-    <div className='h-screen w-full flex items-center justify-center gap-8'>
-      <Button
+    <div className='h-screen w-full flex flex-col justify-center items-center gap-8'>
+      {/* <Button
         onClick={() =>
           toastError({
             title: 'Uspjeh',
@@ -41,15 +42,44 @@ const App = () => {
           <SelectItem value='item-2'>Item 2</SelectItem>
           <SelectItem value='item-3'>Item 3</SelectItem>
         </SelectContent>
-      </Select>
-      <NavigationMenu>
+      </Select> */}
+      <NavigationMenu className='z-30' viewportProps={{ className: 'bg-mode-accent' }}>
         <NavigationMenuItem value='AEF'>
-          <NavigationMenuTrigger>Trigger</NavigationMenuTrigger>
+          <NavigationMenuTrigger>Trigger 1</NavigationMenuTrigger>
+          <NavigationMenuContent className='bg-mode-accent'>
+            <div className='w-[300px]'>
+              Content that is displayed Some othe content that is displayed eaf ae faef eaaef aefk
+              peaf piajef pieaj pifjpiaejf pieaj piaej paei jpaeijeaip jeapij p Some othe content
+              that is displayed eaf ae faef eaaef aefk peaf piajef pieaj pifjpiaejf pieaj piaej paei
+              jpaeijeaip jeapij p Some othe content that is displayed eaf ae faef eaaef aefk peaf
+              piajef pieaj pifjpiaejf pieaj piaej paei jpaeijeaip jeapij p
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem value='aef'>
+          <NavigationMenuTrigger>Trigger 2</NavigationMenuTrigger>
           <NavigationMenuContent>
-            <div className='min-w-[200px]'>Content je najbolji jel tak</div>
+            <div className='min-w-[400px]'>
+              Some othe content that is displayed eaf ae faef eaaef aefk peaf piajef pieaj
+              pifjpiaejf pieaj piaej paei jpaeijeaip jeapij p displayed eaf ae faef eaaef aefk peaf
+              piajef pieaj pifjpiaejf pieaj piaej paei jpaeijeaip jeapij p Some othe content that is
+              displayed
+            </div>
           </NavigationMenuContent>
         </NavigationMenuItem>
       </NavigationMenu>
+      <div className='relative z-20'>Text bellow popover</div>
+      <Select>
+        <SelectTrigger className='w-[200px]'>Select</SelectTrigger>
+        <SelectContent hasScroll>
+          {Array.from({ length: 20 }).map((_, index) => (
+            <SelectItem value={index}>{index}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <div className='grid gap-4'>
+        <Skeleton className='h-[40px] w-[200px]' />
+      </div>
       <Toaster />
     </div>
   )

diff --git a/src/components/_shared/utils/get-animation-style-variables.ts b/src/components/_shared/utils/get-animation-style-variables.ts
@@ -1,6 +1,6 @@
 import React from 'react'
 
-type AnimationStyleVariaiables = {
+type AnimationStyleVariables = {
   animationDuration?: number | undefined
   animationInDuration?: number | undefined
   animationOutDuration?: number | undefined
@@ -27,7 +27,7 @@ type AnimationStyleDefaultTimingFunctions = {
   defaultAnimationOutTimingFunction: React.CSSProperties['animationTimingFunction']
 }
 
-type GetAnimationStyleVariablesProps = AnimationStyleVariaiables &
+type GetAnimationStyleVariablesProps = AnimationStyleVariables &
   (AnimationStyleDefaultDuration | AnimationStyleDefaultDurations) &
   (AnimationStyleDefaultTimingFunction | AnimationStyleDefaultTimingFunctions) &
   Record<string, unknown>
@@ -76,4 +76,4 @@ function getAnimationStyleVariables(props: GetAnimationStyleVariablesProps) {
 
 export { getAnimationStyleVariables }
 
-export type { AnimationStyleVariaiables }
+export type { AnimationStyleVariables }
diff --git a/src/components/accordion/types/accordion-content.ts b/src/components/accordion/types/accordion-content.ts
@@ -3,7 +3,7 @@ import { Simplify } from '@renderui/types'
 import React from 'react'
 
 import { AsChildProp } from '@/components/_shared/types/as-child'
-import { AnimationStyleVariaiables } from '@/components/_shared/utils/get-animation-style-variables'
+import { AnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 
 type AccordionContentPrimitiveType = typeof AccordionContentPrimitive
 
@@ -14,7 +14,7 @@ type AccordionContentPrimitiveProps = React.ComponentPropsWithoutRef<AccordionCo
 type AccordionContentChildrenContainerProps = {
   childrenContainerProps?: Simplify<React.ComponentPropsWithoutRef<'div'> & AsChildProp>
   animationDuration?: number
-} & AnimationStyleVariaiables
+} & AnimationStyleVariables
 
 type AccordionContentProps = Simplify<
   AccordionContentPrimitiveProps & AccordionContentChildrenContainerProps