diff --git a/package.json b/package.json index 405599a96..b0aab0da7 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "class-variance-authority": "0.7.0", "clsx": "2.1.0", "electron-updater": "^6.1.7", + "framer-motion": "11.0.27", "react-router-dom": "6.22.3", "tailwind-merge": "2.2.2", "tailwindcss-animate": "1.0.7" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0c5298a6c..7fe2c72f5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,9 @@ dependencies: electron-updater: specifier: ^6.1.7 version: 6.1.8 + framer-motion: + specifier: 11.0.27 + version: 11.0.27(react-dom@18.2.0)(react@18.2.0) react-router-dom: specifier: 6.22.3 version: 6.22.3(react-dom@18.2.0)(react@18.2.0) @@ -3394,6 +3397,25 @@ packages: mime-types: 2.1.35 dev: true + /framer-motion@11.0.27(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-OmY1hnBXxUfvQTuoPqumAiXYPEt8jY31Fqbmihf/NR29XUL9BkRPHrqVqtJS7TLKriwRt+0pbwiO9tnziZTJzA==} + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 + react-dom: ^18.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true + dependencies: + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + tslib: 2.6.2 + dev: false + /fs-constants@1.0.0: resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==} dev: true @@ -5300,7 +5322,6 @@ packages: /tslib@2.6.2: resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} - dev: true /type-check@0.4.0: resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} diff --git a/src/renderer/src/components/type-tab.tsx b/src/renderer/src/components/type-tab.tsx index 1a1e5e1bb..de90418b6 100644 --- a/src/renderer/src/components/type-tab.tsx +++ b/src/renderer/src/components/type-tab.tsx @@ -2,59 +2,96 @@ import { Tooltip, TooltipContent, TooltipProvider, - TooltipTrigger, -} from "@renderer/components/ui/tooltip" -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@renderer/components/ui/tabs" + TooltipTrigger +} from '@renderer/components/ui/tooltip' +import { m, useScroll, useMotionValueEvent } from 'framer-motion' +import { useRef, useState } from 'react' + +function Content({ type }: { type: string }) { + return ( +
+
{type}
+
+ ) +} export function TypeTab() { + const items = [ + { + name: 'Articles', + icon: , + className: 'text-indigo-600' + }, + { + name: 'Social Media', + icon: , + className: 'text-sky-600' + }, + { + name: 'Pictures', + icon: , + className: 'text-green-600' + }, + { + name: 'Videos', + icon: , + className: 'text-red-600' + }, + { + name: 'Audios', + icon: , + className: 'text-purple-600' + }, + { + name: 'Notifications', + icon: , + className: 'text-yellow-600' + } + ] + + const carouselRef = useRef(null) + const { scrollXProgress } = useScroll({ + container: carouselRef + }) + + const [xProgress, setXProgress] = useState(0) + useMotionValueEvent(scrollXProgress, "change", (value) => { + setXProgress(value); + }) + return ( - - - +
+ {items.map((item, index) => ( + { + if (carouselRef.current) { + carouselRef.current.scrollTo({ + left: carouselRef.current.clientWidth * index, + behavior: 'smooth' + }) + } + }} + > - - Articles + {item.icon} + {item.name} - - - - - Social Media - - - - - - Pictures - - - - - - Videos - - - - - - Audios - - - - - - Notifications - - - - Articles - Social Media - Pictures - Videos - Audios - Notifications - + + ))} +
+
+ {items.map((item) => ( +
+ +
+ ))} +
) } diff --git a/src/renderer/src/components/ui/tabs.tsx b/src/renderer/src/components/ui/tabs.tsx deleted file mode 100644 index bc3d9ba0b..000000000 --- a/src/renderer/src/components/ui/tabs.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from "react" -import * as TabsPrimitive from "@radix-ui/react-tabs" - -import { cn } from "@renderer/lib/utils" - -const Tabs = TabsPrimitive.Root - -const TabsList = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) -TabsList.displayName = TabsPrimitive.List.displayName - -const TabsTrigger = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) -TabsTrigger.displayName = TabsPrimitive.Trigger.displayName - -const TabsContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) -TabsContent.displayName = TabsPrimitive.Content.displayName - -export { Tabs, TabsList, TabsTrigger, TabsContent } diff --git a/src/renderer/src/framer-lazy-feature.ts b/src/renderer/src/framer-lazy-feature.ts new file mode 100644 index 000000000..bae59b0f5 --- /dev/null +++ b/src/renderer/src/framer-lazy-feature.ts @@ -0,0 +1,3 @@ +import { domMax } from "framer-motion" + +export default domMax diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx index 3e38e5476..be9c89922 100644 --- a/src/renderer/src/main.tsx +++ b/src/renderer/src/main.tsx @@ -4,6 +4,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import { RouterProvider, createBrowserRouter } from 'react-router-dom' +import { LazyMotion, MotionConfig } from "framer-motion" const router = createBrowserRouter([ { @@ -22,8 +23,20 @@ const router = createBrowserRouter([ } ]) +const loadFeatures = () => + import("./framer-lazy-feature").then((res) => res.default) + ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - + + + + + ) diff --git a/src/renderer/src/pages/index.tsx b/src/renderer/src/pages/index.tsx index ac7a30776..ab8c5181b 100644 --- a/src/renderer/src/pages/index.tsx +++ b/src/renderer/src/pages/index.tsx @@ -3,7 +3,7 @@ import { TypeTab } from '@renderer/components/type-tab' export function Component() { return (
-
+
Two