-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
DEAR-129: add styling to dashbaord and remove unused components
- Loading branch information
Showing
20 changed files
with
362 additions
and
481 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 was deleted.
Oops, something went wrong.
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 |
|---|---|---|
| @@ -1,27 +1,47 @@ | ||
| import * as React from 'react'; | ||
| import { Card, CardContent, CardHeader } from '@components/ui/Card/Card'; | ||
| import { motion, useAnimation } from 'framer-motion'; | ||
|
|
||
| interface SprintWidgetProps { | ||
| icon: React.ReactNode; | ||
| content: React.ReactNode; | ||
| description: string; | ||
| } | ||
|
|
||
| const SprintWidget: React.FC<SprintWidgetProps> = ({ icon, content, description }) => ( | ||
| <Card className="group flex flex-col rounded-2xl border-none bg-primaryGreen-light shadow-none hover:bg-primaryGreen-main"> | ||
| <CardHeader className="flex flex-row"> | ||
| <div className="flex-1" /> | ||
| <div className="rounded-full bg-primaryGreen-main p-2 text-white group-hover:bg-white group-hover:text-primaryGreen-main"> | ||
| {icon} | ||
| </div> | ||
| </CardHeader> | ||
| <CardContent className="flex flex-grow flex-col justify-end"> | ||
| <div className="space-y-1 text-primaryGreen-main group-hover:text-white"> | ||
| <h1 className="text-4xl md:text-4xl lg:text-6xl">{content}</h1> | ||
| <p className="md:text-md text-sm font-light">{description}</p> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| ); | ||
| const SprintWidget: React.FC<SprintWidgetProps> = ({ icon, content, description }) => { | ||
| const controls = useAnimation(); | ||
|
|
||
| const handleHoverStart = () => { | ||
| controls.start({ | ||
| x: [-30, 30], | ||
| }); | ||
| }; | ||
|
|
||
| const handleHoverEnd = () => { | ||
| controls.stop(); | ||
| controls.set({ x: 0 }); | ||
| }; | ||
|
|
||
| return ( | ||
| <motion.div onHoverStart={handleHoverStart} onHoverEnd={handleHoverEnd}> | ||
| <Card className="group flex h-full w-full flex-col rounded-2xl border-none bg-primaryGreen-light shadow-none hover:bg-primaryGreen-main"> | ||
| <CardHeader className="flex flex-row"> | ||
| <div className="flex-1" /> | ||
| <div className="rounded-full bg-primaryGreen-main p-2 text-white group-hover:bg-white group-hover:text-primaryGreen-main"> | ||
| <motion.div animate={controls} transition={{ duration: 1.5, repeat: Infinity, repeatType: 'loop' }}> | ||
| {icon} | ||
| </motion.div> | ||
| </div> | ||
| </CardHeader> | ||
| <CardContent className="flex flex-grow flex-col justify-end"> | ||
| <div className="space-y-1 text-primaryGreen-main group-hover:text-white"> | ||
| <h1 className="text-4xl md:text-4xl lg:text-6xl">{content}</h1> | ||
| <p className="md:text-md text-sm font-light">{description}</p> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| </motion.div> | ||
| ); | ||
| }; | ||
|
|
||
| export default SprintWidget; |
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,33 @@ | ||
| import * as React from 'react'; | ||
| import { HoverCard, HoverCardTrigger, HoverCardContent } from '@components/ui/HoverCard/HoverCard'; | ||
| import { FilePlus } from 'lucide-react'; | ||
|
|
||
| interface SurveyHoverCardProps { | ||
| title: string; | ||
| description: string; | ||
| } | ||
|
|
||
| const SurveyHoverCard: React.FC<SurveyHoverCardProps> = ({ title, description }) => ( | ||
| <HoverCard> | ||
| <HoverCardTrigger asChild> | ||
| <div className="rounded-full bg-slate-900 p-2 text-white"> | ||
| <FilePlus className="h-5 w-5" /> | ||
| </div> | ||
| </HoverCardTrigger> | ||
| <HoverCardContent className="w-auto rounded-2xl p-4 shadow-none"> | ||
| <div className="flex flex-row gap-4"> | ||
| <div className="w-auto self-start rounded-full bg-slate-900 p-2 text-white"> | ||
| <FilePlus className="h-6 w-6" /> | ||
| </div> | ||
| <div className="flex flex-col items-start"> | ||
| <div className="space-y-1"> | ||
| <h4 className="text-sm font-semibold">{title}</h4> | ||
| <p className="max-w-60 break-words text-sm font-thin">{description}</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </HoverCardContent> | ||
| </HoverCard> | ||
| ); | ||
|
|
||
| export default SurveyHoverCard; |
Oops, something went wrong.