UpEase-Framework Section #5
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,43 @@ | ||
| import React from 'react'; | ||
|
|
||
| import Graph from '@/components/Graph'; | ||
| import { StickyScroll } from '@/components/ui/Sticky-scroll-reveal'; | ||
|
|
||
| const FrameworkSection = () => { | ||
| const content = [ | ||
| { | ||
| title: 'Student App', | ||
| description: | ||
| 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae metus quis orci pharetra fermentum. Pellentesque nec mi nec sem efficitur interdum. Mauris nec est quis turpis vehicula luctus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae metus quis orci pharetra fermentum. Pellentesque nec mi nec sem efficitur interdum. Mauris nec est quis turpis vehicula luctu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae metus quis orci pharetra fermentum. Pellentesque nec mi nec sem efficitur interdum. Mauris nec est quis turpis vehicula luctus', | ||
| content: <Graph highlightedNumber={1} />, | ||
| }, | ||
| { | ||
| title: 'Copilot Stack', | ||
| description: | ||
| 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae metus quis orci pharetra fermentum. Pellentesque nec mi nec sem efficitur interdum. Mauris nec est quis turpis vehicula luctus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae metus quis orci pharetra fermentum. Pellentesque nec mi nec sem efficitur interdum. Mauris nec est quis turpis vehicula luctu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae metus quis orci pharetra fermentum. Pellentesque nec mi nec sem efficitur interdum. Mauris nec est quis turpis vehicula luctus', | ||
|
|
||
| content: <Graph highlightedNumber={2} />, | ||
| }, | ||
| { | ||
| title: 'Upease Console', | ||
| description: | ||
| 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae metus quis orci pharetra fermentum. Pellentesque nec mi nec sem efficitur interdum. Mauris nec est quis turpis vehicula luctus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae metus quis orci pharetra fermentum. Pellentesque nec mi nec sem efficitur interdum. Mauris nec est quis turpis vehicula luctu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae metus quis orci pharetra fermentum. Pellentesque nec mi nec sem efficitur interdum. Mauris nec est quis turpis vehicula luctus', | ||
|
|
||
| content: <Graph highlightedNumber={3} />, | ||
| }, | ||
| { | ||
| title: 'Your App', | ||
| description: | ||
| 'Lorem ipsum dopor sit amet, consectetur adipiscing elit. Sed vitae metus quis orci pharetra fermentum. Pellentesque nec mi nec sem efficitur interdum. Mauris nec est quis turpis vehicula luctus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae metus quis orci pharetra fermentum. Pellentesque nec mi nec sem efficitur interdum. Mauris nec est quis turpis vehicula luctu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae metus quis orci pharetra fermentum. Pellentesque nec mi nec sem efficitur interdum. Mauris nec est quis turpis vehicula luctus', | ||
|
|
||
| content: <Graph highlightedNumber={4} />, | ||
| }, | ||
| ]; | ||
| return ( | ||
| <div className='h-full w-full'> | ||
| <StickyScroll content={content} /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default FrameworkSection; |
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,68 @@ | ||
| import { motion } from 'framer-motion'; | ||
| import React from 'react'; | ||
|
|
||
| function Graph({ highlightedNumber }: { highlightedNumber: number }) { | ||
|
There was a problem hiding this comment. Tip Codebase Verification The verification process did not reveal any tests specifically targeting edge cases for
Analysis chain
Scripts ExecutedThe following scripts were executed for the analysis: Script: #!/bin/bash
# Description: Verify edge case handling for `highlightedNumber`.
# Test: Search for tests related to `highlightedNumber`.
rg 'highlightedNumber' --type js | rg 'test'
Length of output: 42 Script: #!/bin/bash
# Description: Verify edge case handling for `highlightedNumber` in the Graph component.
# Step 1: Search for tests related to the Graph component.
rg 'Graph' --type js | rg 'test'
# Step 2: Inspect the Graph component for edge case handling logic.
ast-grep --lang tsx --pattern $'function Graph({ highlightedNumber }: { highlightedNumber: number }) {
$$$
}' --debug
# Step 3: Check for any related utility functions or components that might handle edge cases.
rg 'highlightedNumber' --type js
Length of output: 391 Script: #!/bin/bash
# Description: Verify edge case handling for `highlightedNumber` in the Graph component.
# Step 1: Search for tests related to the Graph component.
rg 'Graph' --type js | rg 'test'
# Step 2: Inspect the Graph component for edge case handling logic.
ast-grep --lang tsx --pattern $'function Graph({ highlightedNumber }: { highlightedNumber: number }) {
$$$
}' --debug-query
# Step 3: Check for any related utility functions or components that might handle edge cases.
rg 'highlightedNumber' --type js
Length of output: 4121 |
||
| const description = [ | ||
| { id: 1, nodes: ['Student App'] }, | ||
| { id: 2, nodes: ['Copilot Stack', 'UpEase Console', 'Your App'] }, | ||
| { id: 3, nodes: ['UpEase Framework', 'University Data Model'] }, | ||
| { | ||
| id: 4, | ||
| nodes: ['Microsoft EDU', 'Office Apps', 'Multi Tenant', 'Microsoft AD'], | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <> | ||
| <div key='1' className='flex flex-col items-center gap-8'></div> | ||
| {description | ||
| .filter((item) => item.id === highlightedNumber) | ||
| .map((item, id) => ( | ||
| <motion.div | ||
| initial={{ | ||
| x: 1000, | ||
| opacity: 0, | ||
| }} | ||
| animate={{ | ||
| x: 0, | ||
| opacity: 1, | ||
| }} | ||
| transition={{ | ||
| ease: 'easeInOut', | ||
| duration: 0.5, | ||
| }} | ||
| key={id} | ||
| className='flex h-full w-full flex-col justify-around gap-6 rounded-lg p-6' | ||
| > | ||
| {item.nodes.map((node, index) => ( | ||
| <motion.div | ||
| key={index} | ||
| className='flex h-1/4 rounded-lg border border-gray-200 bg-gray-400 p-6 text-center shadow-lg shadow-gray-300' | ||
| initial={{ | ||
| x: 10000, | ||
| opacity: 0, | ||
| }} | ||
| animate={{ | ||
| x: 0, | ||
| opacity: 1, | ||
| }} | ||
| exit={{ | ||
| x: 10000, | ||
| opacity: 0, | ||
| }} | ||
| transition={{ | ||
| ease: 'easeInOut', | ||
| duration: 0.3, | ||
| delay: index * 0.1, // Add delay for staggered animation | ||
| }} | ||
| > | ||
| <div className='m-auto text-4xl font-bold'>{node}</div> | ||
| </motion.div> | ||
| ))} | ||
| </motion.div> | ||
| ))} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default Graph; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use self-closing tags for elements without children.
This change addresses the linting error regarding the use of self-closing elements for JSX elements without children.
Committable suggestion
Tools
Biome