-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adds better view on repo table and fixes team details bugs (#62)
* Adds better view on repo table and fixes other team details page issues * Fixes lint issues
- Loading branch information
1 parent
d5c0f1e
commit 0a8581c
Showing
8 changed files
with
214 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| "use client"; | ||
| import React from "react"; | ||
| import { motion } from "framer-motion"; | ||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| export const BoxesCore = ({ className, ...rest }: { className?: string }) => { | ||
| const rows = new Array(150).fill(1); | ||
| const cols = new Array(100).fill(1); | ||
| const colors = [ | ||
| "--sky-300", | ||
| "--pink-300", | ||
| "--green-300", | ||
| "--yellow-300", | ||
| "--red-300", | ||
| "--purple-300", | ||
| "--blue-300", | ||
| "--indigo-300", | ||
| "--violet-300", | ||
| ]; | ||
| const getRandomColor = () => { | ||
| return colors[Math.floor(Math.random() * colors.length)]; | ||
| }; | ||
|
|
||
| return ( | ||
| <div | ||
| style={{ | ||
| transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`, | ||
| }} | ||
| className={cn( | ||
| "absolute left-1/4 p-4 -top-1/4 flex -translate-x-1/2 -translate-y-1/2 w-full h-full z-0 ", | ||
| className, | ||
| )} | ||
| {...rest} | ||
| > | ||
| {rows.map((_, i) => ( | ||
| <motion.div | ||
| key={`row` + i} | ||
| className="w-16 h-8 border-l border-slate-700 relative" | ||
| > | ||
| {cols.map((_, j) => ( | ||
| <motion.div | ||
| whileHover={{ | ||
| backgroundColor: `var(${getRandomColor()})`, | ||
| transition: { duration: 0 }, | ||
| }} | ||
| animate={{ | ||
| transition: { duration: 2 }, | ||
| }} | ||
| key={`col` + j} | ||
| className="w-16 h-8 border-r border-t border-slate-700 relative" | ||
| > | ||
| {j % 2 === 0 && i % 2 === 0 ? ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| strokeWidth="1.5" | ||
| stroke="currentColor" | ||
| className="absolute h-6 w-10 -top-[14px] -left-[22px] text-slate-700 stroke-[1px] pointer-events-none" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M12 6v12m6-6H6" | ||
| /> | ||
| </svg> | ||
| ) : null} | ||
| </motion.div> | ||
| ))} | ||
| </motion.div> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export const Boxes = React.memo(BoxesCore); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| "use client"; | ||
| import { useEffect } from "react"; | ||
| import { motion, stagger, useAnimate } from "framer-motion"; | ||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| export const TextGenerateEffect = ({ | ||
| words, | ||
| className, | ||
| }: { | ||
| words: string; | ||
| className?: string; | ||
| }) => { | ||
| const [scope, animate] = useAnimate(); | ||
| const wordsArray = words.split(" "); | ||
| useEffect(() => { | ||
| animate( | ||
| "span", | ||
| { | ||
| opacity: 1, | ||
| }, | ||
| { | ||
| duration: 2, | ||
| delay: stagger(0.2), | ||
| }, | ||
| ); | ||
| }, [scope.current]); | ||
|
|
||
| const renderWords = () => { | ||
| return ( | ||
| <motion.div ref={scope}> | ||
| {wordsArray.map((word, idx) => { | ||
| return ( | ||
| <motion.span | ||
| key={word + idx} | ||
| className="dark:text-white text-black opacity-0" | ||
| > | ||
| {word}{" "} | ||
| </motion.span> | ||
| ); | ||
| })} | ||
| </motion.div> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={cn("font-bold", className)}> | ||
| <div className="mt-4"> | ||
| <div className=" dark:text-white text-black text-2xl leading-snug tracking-wide"> | ||
| {renderWords()} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters