-
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.
chore: add editable content, size variation.
- Loading branch information
1 parent
00b783f
commit c10eb53
Showing
7 changed files
with
212 additions
and
12 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /* eslint-disable react/prop-types */ | ||
| import { useState } from 'react'; | ||
| import sampleTexts from './sampleTexts'; | ||
|
|
||
| function EditableContent(props) { | ||
| const [fontSize, setFontSize] = useState(75); | ||
| const [content, setContent] = useState(props.fontFamily); | ||
|
|
||
| const getRandomSampleText = () => { | ||
| const randomIndex = Math.floor(Math.random() * sampleTexts.length); | ||
| return sampleTexts[randomIndex]; | ||
| }; | ||
|
|
||
| const handleRefreshClick = () => { | ||
| setFontSize(58); | ||
| setContent(getRandomSampleText()); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className='editableContentWrapper'> | ||
| <div className='editableRow'> | ||
| <h2>{props.title}</h2> | ||
| <div className='flex'> | ||
| <input | ||
| type="range" | ||
| min="16" | ||
| max="150" | ||
| value={fontSize} | ||
| onChange={(e) => setFontSize(e.target.value)} | ||
| /> | ||
| <button onClick={handleRefreshClick} className="refresh-button">↻</button> | ||
| </div> | ||
| </div> | ||
| <div | ||
| className='editableContent' | ||
| contentEditable={true} | ||
| spellCheck={false} | ||
| style={{ | ||
| fontFamily: props.fontFamily, | ||
| fontSize: `${fontSize}px`, | ||
| }} | ||
| dangerouslySetInnerHTML={{ __html: content }} | ||
| ></div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default EditableContent; |
Binary file not shown.
Binary file not shown.
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 |
|---|---|---|
|
|
@@ -2,16 +2,15 @@ | |
| const data = { | ||
| "coaster-sans": { | ||
| title: "Coaster Sans", | ||
| category: "with Mother", | ||
| featured: true, | ||
| fontFamily: "Coaster Sans", | ||
| year: '2023', | ||
| description: "A new chunky display font that will make you feel like you're riding the waves back home.", | ||
| content: "There's still some proofing on this font being done, so if you like it, give me a buzz at <a href='mailto:[email protected]'>[email protected]</a> and I'll let you know when v1.1 is out.", | ||
| downloadLink: 'https://printerscanner.net/CoasterSans.zip' | ||
| }, | ||
| "body-sans": { | ||
| title: "(my) body sans", | ||
| category: "with Mother", | ||
| fontFamily: "Body Sans", | ||
| description: "You've seen kitsch body fonts, but you haven't seen one that's literally my body. Great for resumes and businesses. If you are a corporation, please reach out directly regarding a business license.", | ||
| year: '2023', | ||
| downloadLink: 'https://printerscanner.net/BodySans-Regular.zip' | ||
|
|
||
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,47 @@ | ||
| const sampleTexts = [ | ||
| 'I am Groot.', | ||
| 'To infinity and beyond!', | ||
| 'May the Force be with you.', | ||
| 'Here’s Johnny!', | ||
| 'Hasta la vista, baby.', | ||
| 'Keep your friends close, but your enemies closer.', | ||
| 'You can’t handle the truth!', | ||
| 'The only thing we have to fear is fear itself.', | ||
| 'Life is like a box of chocolates.', | ||
| 'I feel the need... the need for speed.', | ||
| 'I see dead people.', | ||
| 'I’ll be back.', | ||
| 'You talking to me?', | ||
| 'It’s alive! It’s alive!', | ||
| 'Bond. James Bond.', | ||
| 'I’m the king of the world!', | ||
| 'I’ll have what she’s having.', | ||
| 'Here’s looking at you, kid.', | ||
| 'You shall not pass!', | ||
| 'Houston, we have a problem.', | ||
| 'This is the way.', | ||
| 'I love the smell of napalm in the morning.', | ||
| 'I’ll be there for you.', | ||
| 'Shaken, not stirred.', | ||
| 'I have the high ground.', | ||
| 'I’ve got a bad feeling about this.', | ||
| 'Live long and prosper.', | ||
| 'Do or do not. There is no try.', | ||
| 'I have a bad feeling about this.', | ||
| 'You’re a wizard, Harry.', | ||
| 'Why so serious?', | ||
| 'Use the Force, Luke.', | ||
| 'Go ahead, make my day.', | ||
| 'I am your father.', | ||
| 'I can’t carry it for you, but I can carry you.', | ||
| 'The power of the Force. Inside you.', | ||
| 'No, I am your father.', | ||
| 'I don’t want to survive. I want to live.', | ||
| 'The Force will be with you. Always.', | ||
| 'Once upon a time in a land far, far away, there lived a young hero who was destined to save the kingdom. This hero, armed with a magical sword, embarked on a perilous journey filled with monsters, wizards, and treacherous obstacles. Along the way, the hero met loyal companions, faced moral dilemmas, and ultimately confronted the evil sorcerer who threatened the realm. The battle was fierce, and the heros courage shone brightly as the fate of the kingdom hung in the balance. In the end, good triumphed over evil, and the heros name was celebrated throughout the land for generations to come.', | ||
| 'In a galaxy not so far away, a group of rebels fought against the tyrannical rule of an oppressive empire. Their mission: to steal the plans for the empire\'s ultimate weapon, the Death Star. As they faced insurmountable odds, the rebels showed incredible bravery and determination. With the fate of the galaxy at stake, they risked it all to bring hope to those who had none. The force of good prevailed, and the rebels actions paved the way for a new hope and a brighter future.', | ||
| 'Once in a quiet town nestled among rolling hills, there lived a mysterious stranger. This stranger had a secret, a secret that would change the town forever. As the townspeople got to know the stranger, they discovered that the power of kindness and compassion could transform even the most enigmatic individuals. With each act of goodwill, the strangers true nature was revealed, and the town became a place of warmth and acceptance, where all were welcome and loved. In the end, the stranger left, but their legacy of love and understanding remained, a testament to the extraordinary power of simple acts of kindness.' | ||
| ]; | ||
|
|
||
|
|
||
| export default sampleTexts; |