diff --git a/ui_tailwind_shadecn/package-lock.json b/ui_tailwind_shadecn/package-lock.json index a7d66c8..c0a2692 100644 --- a/ui_tailwind_shadecn/package-lock.json +++ b/ui_tailwind_shadecn/package-lock.json @@ -30,12 +30,13 @@ "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", + "@tabler/icons-react": "^3.2.0", "@tanstack/react-table": "^8.15.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "cmdk": "^1.0.0", "date-fns": "^3.6.0", - "framer-motion": "^11.0.25", + "framer-motion": "^11.1.5", "lucide-react": "^0.360.0", "monaco-editor": "^0.44.0", "next-themes": "^0.3.0", @@ -70,7 +71,7 @@ "react-dom": "^18.2.0", "tailwindcss": "^3.4.1", "typescript": "^5.2.2", - "vite": "^5.2.8" + "vite": "^5.2.9" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -2726,6 +2727,30 @@ "@swc/counter": "^0.1.3" } }, + "node_modules/@tabler/icons": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.2.0.tgz", + "integrity": "sha512-h8GQ2rtxgiSjltrVz4vcopAxTPSpUSUi5nBfJ09H3Bk4fJk6wZ/dVUjzhv/BHfDwGTkAxZBiYe/Q/T95cPeg5Q==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/codecalm" + } + }, + "node_modules/@tabler/icons-react": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.2.0.tgz", + "integrity": "sha512-b1mZT1XpZrzvbM+eFe1YbYbxkzgJ18tM4knZKqXh0gnHDZ6XVLIH3TzJZ3HZ7PTkUqZLZ7XcGae3qQVGburlBw==", + "dependencies": { + "@tabler/icons": "3.2.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/codecalm" + }, + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@tanstack/react-table": { "version": "8.15.0", "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.15.0.tgz", @@ -4126,9 +4151,9 @@ } }, "node_modules/framer-motion": { - "version": "11.0.25", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.25.tgz", - "integrity": "sha512-mRt7vQGzA7++wTgb+PW1TrlXXgndqR6hCiJ48fXr2X9alte2hPQiAq556HRwDCt0Q5X98MNvcSe4KUa27Gm5Lg==", + "version": "11.1.5", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.5.tgz", + "integrity": "sha512-ogK5fc0GBUT3AjzMXPx7f74m5V1ByRqkKQARBVHpdkYTNDxb/WriANYD+5JBo1wklQQJ1HayDZtmofQLqZFcbw==", "dependencies": { "tslib": "^2.4.0" }, @@ -6007,9 +6032,9 @@ } }, "node_modules/vite": { - "version": "5.2.8", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz", - "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==", + "version": "5.2.9", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.9.tgz", + "integrity": "sha512-uOQWfuZBlc6Y3W/DTuQ1Sr+oIXWvqljLvS881SVmAj00d5RdgShLcuXWxseWPd4HXwiYBFW/vXHfKFeqj9uQnw==", "dev": true, "dependencies": { "esbuild": "^0.20.1", diff --git a/ui_tailwind_shadecn/package.json b/ui_tailwind_shadecn/package.json index 8b179f1..ab69ba1 100644 --- a/ui_tailwind_shadecn/package.json +++ b/ui_tailwind_shadecn/package.json @@ -32,12 +32,13 @@ "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", + "@tabler/icons-react": "^3.2.0", "@tanstack/react-table": "^8.15.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "cmdk": "^1.0.0", "date-fns": "^3.6.0", - "framer-motion": "^11.0.25", + "framer-motion": "^11.1.5", "lucide-react": "^0.360.0", "monaco-editor": "^0.44.0", "next-themes": "^0.3.0", @@ -72,6 +73,6 @@ "react-dom": "^18.2.0", "tailwindcss": "^3.4.1", "typescript": "^5.2.2", - "vite": "^5.2.8" + "vite": "^5.2.9" } } diff --git a/ui_tailwind_shadecn/src/components/custom_ui/MainNav.tsx b/ui_tailwind_shadecn/src/components/custom_ui/MainNav.tsx index 4d6c9ed..41315f9 100644 --- a/ui_tailwind_shadecn/src/components/custom_ui/MainNav.tsx +++ b/ui_tailwind_shadecn/src/components/custom_ui/MainNav.tsx @@ -56,6 +56,12 @@ export default function MainNav(){ > AllComponents + + AboutUs + diff --git a/ui_tailwind_shadecn/src/components/custom_ui/Svg.tsx b/ui_tailwind_shadecn/src/components/custom_ui/Svg.tsx index aa0000a..dec961d 100644 --- a/ui_tailwind_shadecn/src/components/custom_ui/Svg.tsx +++ b/ui_tailwind_shadecn/src/components/custom_ui/Svg.tsx @@ -113,5 +113,13 @@ const TailwindCss = ()=>{ ) } +const CreateNewComp = ()=>{ + return( + <> + + + ) +} + export default Icons; -export {Logo, LeftArrow, SaveIcon, SearchIcon, LogoPlain, CodeIcon, TailwindCss} \ No newline at end of file +export {Logo, LeftArrow, SaveIcon, SearchIcon, LogoPlain, CodeIcon, TailwindCss, CreateNewComp} \ No newline at end of file diff --git a/ui_tailwind_shadecn/src/components/custom_ui/Table.tsx b/ui_tailwind_shadecn/src/components/custom_ui/Table.tsx index 3ce11f5..fadf03f 100644 --- a/ui_tailwind_shadecn/src/components/custom_ui/Table.tsx +++ b/ui_tailwind_shadecn/src/components/custom_ui/Table.tsx @@ -111,4 +111,567 @@ const Table = ()=>{ ) } -export default Table; \ No newline at end of file +const GradientTable = ()=>{ + return( + <> +
+

+ Customers +

+

+ These companies have purchased in the last 12 months. +

+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Status + + About + + Users + + License use + + Edit +
+
+

+ Catalog +

+

+ catalogapp.io +

+
+ 		+
+ Customer +
+ 		+
+

+ Content curating app +

+

+ Brings all your news into one place +

+
+ 		+
+ + + + +

+ +4 +

+
+ 		+
+
+
+
+ +
+
+

+ Circooles +

+

+ getcirooles.com +

+
+ 		+
+ Churned +
+ 		+
+

+ Design software +

+

+ Super lightweight design app +

+
+ 		+
+ + + + +

+ +4 +

+
+ 		+
+
+
+
+ +
+
+

+ Sisyphus +

+

+ sisyphus.com +

+
+ 		+
+ Customer +
+ 		+
+

+ Automation and workflow +

+

+ Time tracking, invoicing and expenses +

+
+ 		+
+ + + + +

+ +4 +

+
+ 		+
+
+
+
+ +
+
+

+ Hourglass +

+

+ hourglass.app +

+
+ 		+
+ Churned +
+ 		+
+

+ Productivity app +

+

+ Time management and productivity +

+
+ 		+
+ + + + +

+ +4 +

+
+ 		+
+
+
+
+ +
+
+

+ Quotient +

+

+ quotient.co +

+
+ 		+
+ Customer +
+ 		+
+

+ Sales CRM +

+

+ Web-based sales doc management +

+
+ 		+
+ + + + +

+ +4 +

+
+ 		+
+
+
+
+ +
+
+
+
+
+
+ + + + + previous + +
+ + 1 + + + 2 + + + 3 + + + ... + + + 12 + + + 13 + + + 14 + +
+ + Next + + + + +
+
+ + ) +} + +export default Table; +export {GradientTable} \ No newline at end of file diff --git a/ui_tailwind_shadecn/src/components/ui/commandMenu.tsx b/ui_tailwind_shadecn/src/components/ui/commandMenu.tsx new file mode 100644 index 0000000..197776b --- /dev/null +++ b/ui_tailwind_shadecn/src/components/ui/commandMenu.tsx @@ -0,0 +1,86 @@ + +import * as React from "react" +import { + Calculator, + Calendar, + CreditCard, + Settings, + Smile, + User, +} from "lucide-react" + +import { + CommandDialog, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, + CommandSeparator, + CommandShortcut, +} from "@/components/ui/command" + +export function CommandDialogDemo() { + const [open, setOpen] = React.useState(false) + + React.useEffect(() => { + const down = (e: KeyboardEvent) => { + if (e.key === "j" && (e.metaKey || e.ctrlKey)) { + e.preventDefault() + setOpen((open) => !open) + } + } + + document.addEventListener("keydown", down) + return () => document.removeEventListener("keydown", down) + }, []) + + return ( + <> +

+ Press{" "} + + ⌘J + +

+ + + + No results found. + + + + Calendar + + + + Search Emoji + + + + Calculator + + + + + + + Profile + ⌘P + + + + Billing + ⌘B + + + + Settings + ⌘S + + + + + + ) +} diff --git a/ui_tailwind_shadecn/src/components/ui/hover-border-gradient.tsx b/ui_tailwind_shadecn/src/components/ui/hover-border-gradient.tsx new file mode 100644 index 0000000..e3da120 --- /dev/null +++ b/ui_tailwind_shadecn/src/components/ui/hover-border-gradient.tsx @@ -0,0 +1,98 @@ +import React, { useState, useEffect, useRef } from "react"; + +import { motion } from "framer-motion"; +import { cn } from "@/utils/cn"; + +type Direction = "TOP" | "LEFT" | "BOTTOM" | "RIGHT"; + +export function HoverBorderGradient({ + children, + containerClassName, + className, + as: Tag = "button", + duration = 1, + clockwise = true, + ...props +}: React.PropsWithChildren< + { + as?: React.ElementType; + containerClassName?: string; + className?: string; + duration?: number; + clockwise?: boolean; + } & React.HTMLAttributes +>) { + const [hovered, setHovered] = useState(false); + const [direction, setDirection] = useState("TOP"); + + const rotateDirection = (currentDirection: Direction): Direction => { + const directions: Direction[] = ["TOP", "LEFT", "BOTTOM", "RIGHT"]; + const currentIndex = directions.indexOf(currentDirection); + const nextIndex = clockwise + ? (currentIndex - 1 + directions.length) % directions.length + : (currentIndex + 1) % directions.length; + return directions[nextIndex]; + }; + + const movingMap: Record = { + TOP: "radial-gradient(20.7% 50% at 50% 0%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)", + LEFT: "radial-gradient(16.6% 43.1% at 0% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)", + BOTTOM: + "radial-gradient(20.7% 50% at 50% 100%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)", + RIGHT: + "radial-gradient(16.2% 41.199999999999996% at 100% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)", + }; + + const highlight = + "radial-gradient(75% 181.15942028985506% at 50% 50%, #3275F8 0%, rgba(255, 255, 255, 0) 100%)"; + + useEffect(() => { + if (!hovered) { + const interval = setInterval(() => { + setDirection((prevState) => rotateDirection(prevState)); + }, duration * 1000); + return () => clearInterval(interval); + } + }, [hovered]); + return ( + ) => { + setHovered(true); + }} + onMouseLeave={() => setHovered(false)} + className={cn( + "relative flex rounded-full border content-center bg-black/20 hover:bg-black/10 transition duration-500 dark:bg-white/20 items-center flex-col flex-nowrap gap-10 h-min justify-center overflow-visible p-px decoration-clone w-fit", + containerClassName + )} + {...props} + > +
+ {children} +
+ +
+ + ); +} diff --git a/ui_tailwind_shadecn/src/components/ui/moving-border.tsx b/ui_tailwind_shadecn/src/components/ui/moving-border.tsx new file mode 100644 index 0000000..d5243a9 --- /dev/null +++ b/ui_tailwind_shadecn/src/components/ui/moving-border.tsx @@ -0,0 +1,138 @@ +import React from "react"; +import { + motion, + useAnimationFrame, + useMotionTemplate, + useMotionValue, + useTransform, +} from "framer-motion"; +import { useRef } from "react"; +import { cn } from "@/utils/cn"; + +export function MovingButton({ + borderRadius = "1.75rem", + children, + as: Component = "button", + containerClassName, + borderClassName, + duration, + className, + ...otherProps +}: { + borderRadius?: string; + children: React.ReactNode; + as?: any; + containerClassName?: string; + borderClassName?: string; + duration?: number; + className?: string; + [key: string]: any; +}) { + return ( + +
+ +
+ +
+ +
+ {children} +
+ + ); +} + +export const MovingBorder = ({ + children, + duration = 2000, + rx, + ry, + ...otherProps +}: { + children: React.ReactNode; + duration?: number; + rx?: string; + ry?: string; + [key: string]: any; +}) => { + const pathRef = useRef(); + const progress = useMotionValue(0); + + useAnimationFrame((time) => { + const length = pathRef.current?.getTotalLength(); + if (length) { + const pxPerMillisecond = length / duration; + progress.set((time * pxPerMillisecond) % length); + } + }); + + const x = useTransform( + progress, + (val) => pathRef.current?.getPointAtLength(val).x + ); + const y = useTransform( + progress, + (val) => pathRef.current?.getPointAtLength(val).y + ); + + const transform = useMotionTemplate`translateX(${x}px) translateY(${y}px) translateX(-50%) translateY(-50%)`; + + return ( + <> + + + + + {children} + + + ); +}; diff --git a/ui_tailwind_shadecn/src/screens/AboutUs.tsx b/ui_tailwind_shadecn/src/screens/AboutUs.tsx index 915d04a..50537cf 100644 --- a/ui_tailwind_shadecn/src/screens/AboutUs.tsx +++ b/ui_tailwind_shadecn/src/screens/AboutUs.tsx @@ -1,10 +1,14 @@ +import MainNav from "@/components/custom_ui/MainNav" import ScroolCardReveal from "@/components/custom_ui/ScroolCardReveal" const AboutUs = ()=>{ return( <> + < MainNav/> + + ) diff --git a/ui_tailwind_shadecn/src/screens/View.tsx b/ui_tailwind_shadecn/src/screens/View.tsx index a1c4e0e..e1566f2 100644 --- a/ui_tailwind_shadecn/src/screens/View.tsx +++ b/ui_tailwind_shadecn/src/screens/View.tsx @@ -12,7 +12,7 @@ import { SheetTrigger, SheetContent, Sheet } from "@/components/ui/sheet" import { Input } from "@/components/ui/input" import { DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuContent, DropdownMenu } from "@/components/ui/dropdown-menu" import { Link, useParams } from "react-router-dom"; -import { CircleUser, Menu, Search } from "lucide-react"; +import { CircleUser, Layers, Menu, Search, Github } from "lucide-react"; import { LeftArrow, Logo, LogoPlain } from "@/components/custom_ui/Svg"; import MonacoEditorComponent from "@/components/custom_ui/code_editor/CodeEditor"; import { useState } from "react"; @@ -25,6 +25,9 @@ import { NavSkeleton } from "@/components/custom_ui/skeleton/NavSkeleton"; import { fetchComponentStore } from '@/api/components/component'; import { ComponentStore, } from '@/types/ComponentStore.type'; import { ViewSkeleton } from "@/components/custom_ui/skeleton/ViewSkeleton"; +import { MovingButton } from "@/components/ui/moving-border"; +import { HoverBorderGradient } from "@/components/ui/hover-border-gradient"; +import { CommandDialogDemo } from "@/components/ui/commandMenu"; export function View() { @@ -60,6 +63,7 @@ export function View() { const categries = useCategoriesStore((state) => state.categories); + useEffect(() => { // this function is calling from api folder it will automatically update to the store fetchCategories(); @@ -90,12 +94,14 @@ export function View() { return ( <> +
+
- - Ui-Components + + Ui-Components - +
+ + + Star On Github + +
+
+ +
+ + + + + Signup + +
{componentDetails === null ? ( @@ -153,90 +180,93 @@ export function View() {
- +
- +
Go Back

- Awesome Buttons -

+ Awesome Buttons +
- -
-
-
- - -
-
-
-
- - - - - - - - +
+
- +
+
+ + +
+
+
+
- -
-
- - - - - - My Account - - Settings - Support - - Logout - - -
+
+ + + + + + + + + + + + +
+
+ + + + + + My Account + + Settings + Support + + Logout + + +
@@ -288,22 +318,22 @@ export function View() { }} /> )} - {activeTab === 'css' && { - setComponentDetails((prevDetails) => ({ - ...prevDetails, - html: prevDetails?.html || "", - css: value, - js: prevDetails?.js || "" - })); - }}/>} + {activeTab === 'css' && { + setComponentDetails((prevDetails) => ({ + ...prevDetails, + html: prevDetails?.html || "", + css: value, + js: prevDetails?.js || "" + })); + }} />} {activeTab === 'javascript' && { - setComponentDetails((prevDetails) => ({ - ...prevDetails, - html: prevDetails?.html || "", - css: prevDetails?.css || '', - js: value - })); - }} />} + setComponentDetails((prevDetails) => ({ + ...prevDetails, + html: prevDetails?.html || "", + css: prevDetails?.css || '', + js: value + })); + }} />}
@@ -369,10 +399,6 @@ export function View() {
)} - - - - ) -} +} \ No newline at end of file diff --git a/ui_tailwind_shadecn/tailwind.config.js b/ui_tailwind_shadecn/tailwind.config.js index 029fd11..1482625 100644 --- a/ui_tailwind_shadecn/tailwind.config.js +++ b/ui_tailwind_shadecn/tailwind.config.js @@ -95,7 +95,8 @@ module.exports = { }, plugins: [ require("tailwindcss-animate"), - [addVariablesForColors] + [addVariablesForColors], + addVariablesForColors, ], };