From 3e4ba41196c4143dc5d5f7a09cfe54204605c815 Mon Sep 17 00:00:00 2001 From: natekhchan Date: Thu, 22 Aug 2024 18:36:32 -0700 Subject: [PATCH] done --- BulmaButtonScreenshots.png | Bin 0 -> 7170 bytes package-lock.json | 12 ++++++ package.json | 1 + src/App.js | 35 ++++++++--------- src/components/CoolButton.css | 16 ++++++++ src/components/CoolButton.js | 51 +++++++++++++++++++++++++ src/components/FormField.css | 26 +++++++++++++ src/components/FormField.js | 16 ++++++++ src/components/Message.css | 67 +++++++++++++++++++++++++++++++++ src/components/Message.js | 35 +++++++++++++++++ src/components/Navbar.css | 69 ++++++++++++++++++++++++++++++++++ src/components/Navbar.js | 32 ++++++++++++++++ src/components/SignupForm.css | 34 +++++++++++++++++ src/components/SignupForm.js | 30 +++++++++++++++ 14 files changed, 407 insertions(+), 17 deletions(-) create mode 100644 BulmaButtonScreenshots.png create mode 100644 src/components/CoolButton.css create mode 100644 src/components/CoolButton.js create mode 100644 src/components/FormField.css create mode 100644 src/components/FormField.js create mode 100644 src/components/Message.css create mode 100644 src/components/Message.js create mode 100644 src/components/Navbar.css create mode 100644 src/components/Navbar.js create mode 100644 src/components/SignupForm.css create mode 100644 src/components/SignupForm.js diff --git a/BulmaButtonScreenshots.png b/BulmaButtonScreenshots.png new file mode 100644 index 0000000000000000000000000000000000000000..0f90243103963059467bc00838e5281795eae0a0 GIT binary patch literal 7170 zcmc(Ec{tQx7_U;KP%4zYY-KH5MMBhIB3ol8*^S9IV;@4clx;BfeP>1(WEm>I?CT81 z+EfTL7z`u(9rwBa-}}eC&;8^3eZS{<&U?P^dCxhY_kBMn)<7S?c9G{I0|Nt_j<%K& z0|O(B{%v!CiT-~7NmZLJ&iEJso-&|^_*UqRbIuxi8Vn4z36~D-&ePj0p4#R<3=Hg@ zr_Y&gk8%eF2419&mWGMH&DtD`zsVxDdoxsSYWI`k>if@?991UgYrdFNfHi9V%#Q<5 z;o9ICaBAQjIzOdy$Bs38@;N0UNr^BSJ zt^Y41I9`5fAVc1H=*9QF#gleQQqVY9!MCi#URcFhFe7lW} z^K9VNDJODzcXa>-I-eZX)&;Og-QBg!RCVqmQr7?`^X-bNA;3=D5l!=XNGFb$QLSw6 zVAHZORHu`5ZbAYJS!>|kqu2&@7a6{TZ>T8^=3ZNdPu9$>-cUk2=MwvB74xEp$qF;2 zyKv?J)~v?)6Tb0aes~C#0?c3AU+vJ}7dR`RrsmX9Pi~p;$WFi5@OGP`55QxeZIQI1fxc9_)FgG|J*4hz~LR>01_!G*SIm{eL2@6>| z*MG9BF+XgIr$xY3JLYQ=&Qn!xCvp)Da}FD?xy*!gsBxjUW_I5Z2@I5)DPJi3B+rZD zGkt7*z0H?a|0Co9Kl$&8(*7#&T^`oyFy6L5PX%}{FK?I}xT`h^$=C_reKay0T?3+Z zhpHSCU!5GWU_#d*ou7%|dSWxJ?l1WuwCrqfw-i53eyq!x_^f-D4k5lejFO2KS9RO&z`Ixs=c5H87hSdfYm(ZGKb~hV+hcdH7h+0i{~Dg&at%7|s=aX*De9|8D4Xc!nc@k9Lw01bQ|R6s(H!5+ ze&OsN{&JYLPbSnP%kJEGR$do=038+_S0LkGpSvPp#)~rg!-18o!&5 zpJ&p&yEE2%a(ykukA1!NsTJP#>>Dc%Z@;`+xw~S|tV%7NJxL_e0^;S9B*;vo4jgVg zLmU|~h>eRw7#2P6T^=pcTk5*Pf40ZSz(7bazXDC+Dd6>4HFM*-)I$U&XVdu#V$>aQ*tf&3VVw$=W~O&8vW{ zzzyB92&u{0wPmXqhPEMuf?Vi7%%GX4% z?=9saD~!uB7j5dDhtoQacWSP3a*EcpZGB(~u?^mgob{c7M2Ba}P-dEHjz0cX7@33O z_3E651$6ZF(~vfSI%4|SlTx2k)6)7>cW3Pd@Qd^Sml8z563%Jc_NPh9&*1XQziqT1 ztRskre;-JH7o;zjGJC=LzY*)FIrf>hASM5W;b&7@b}Ppq0Dj8YSSIdbQ*U42FF?WQ zXJcz?NF~(b5l~w@vA9^o=NHV}(Xpg$XTox;TkUw%&yR1nn&H0kx?qpBS=e0rEuE@kGkW5wwhIOEw(L}TOcTbz{i6# z_sEB>ly)#pBd=(NZu{;4?ervXv&OT)C`j%e=8{K$Xc&PgO#PpAl3aj@2co({hGW?7 zIOi9AKczh&1{>2I7n{i5PV zN)a`Mg}2RHeNoL6)PSS2bAJnrJOHQvkYQ*k-Jq$t^aUxLPp_;Pt^1dMQbYyJTjlWW zLrhGf4K^^tDQQ}5Eg2|t|7auyM8E`2a4KYDY1823tgN8&{l?(EEzMgsik3}p6*WwV zgjn%hmrPqXp~Jsf9xozm5E+%5DmTl(5goMoLuEKAYR z{*L?+38Pb?G(KDB2#j+o;$NFjpyw!>M<}aiqbK{z!a=8~ExyBolF66yupgQxr|!Qq=U{pkAATETwC>*Hb>Ukh;Y4_2MtU z0`*!7TYgCZSwM-cKla0|5D(SANAOAg03P(YMy||wbfn6592y;OAv=23=UNBtmCrgo ze;(BwD)pngJFBvQeWCDZ|EK>voBW4TM5=WvGDP~%7ieb5xSh02 zPMQS`+5?y&qfYtCG5x#5P}z=yIm$qJfdw3IC}mmnO_xkcwP!! zWpX=cZ1=dS<7m(w5b-PG@{>CWkGEo^Y}(A;wrxH)<~T=B8(Qk4wR#v4e-^U8C3zpk zj+W|_JeXvw51-DKpI@jOxRar*to!!J@Z-P@K}kDMC9vV_tfTPlK}g`!^uw(&vkX^N z-vFoL!?K1?S^DvfLzf1fTC^PDC|JC$_)SBLBJgaImE?b_jk~;4rmt>qP6QmyN9ZTr zk$mquk}3a7B*5WUubedO^Q^oOFa#M=n4L2=tnfQKSINX_n_qaCJx555qWaW^&o_#- zDcrJrhp9~Da$+y&HI)YEtLt7Z%veu9=XwHCu)3-eo(Bt_rh2C8VSV&OJcIuPBl*vYAmrs4K1=N?6qiXr4^R zq4%|c6wqhr)H7~ts7r<#%EGmL6t-g#Xy5hmz8-)c7opU4%t{Gp^N<;|;u5&W#Ae=( zpe^AE<2qGt(<0lo-2#X`>QcXS)9jo5OQhO~?uHZMD^qLH1hwNYvoL~nX<#L_<#^7I z2+2$$Y3K56VIGl;U#g1AwrzwDq~F)H3E5k85{{xr$cK6z{>W@dWOEs))$y3yQEs>1 zd()rCVaq^r`O8y>KVL8Gwdd;#{3|x$3O1C<+9DUfd@&#J`Is1_MIb1DH_`AsgSAxAw_3 zS@+8D?eK#EUphW#mzzS%#{#r`kqSy0QdP8`#zN&@(zRQLb`#A;?&aOMK%W z<-3&^gV7cyQ$i~26Is-S+f9Hz@Z)4BNQWdm@E#zf0o>5`3IoJh{q_#(@RDmKn#DGp z%|zzzvSGpr&;2UCka^=CTS{Km)rUnkQ+B*`(6HR~S~*SZYNZU~WBIv*q(%rz0>KZ8 zGWY@dJGmf}^v&?ot0&@KTIKy{)Ms3qD*ht;pQT^HW5X}6eEGZbCEAUQjTaB8!w*tx zCDC8LD{S`n^~oiy+)18Bq9iL}Jby7PrBMPX0k?c`m72A_eta`DjLBdvp==nxQFIF^ zJClzgX0W&8G8EqHWhtSiieG6`Lcq&oaGZK6=IqKrF4RU`mLH36MQ{Bicp}r%oX%G3 z^PFoS5vG64oua+^%Q)y)^`qgcu0B7R1E{v7!JvN9%tKpry?$vGxlK|*8`Z#1ya+Pw zZ8$r*^=EF&Wc_)->tTzVf>~1H-L9#FPHS}&WS#_#`D3um#${{H9X+IKRpa-ZCY~}L zGW-)Ya5-~Gj5ompWsTW1Yf=muhFv7?jzQKcDllq2jpLSr-@RfO~RF? z^L$8QV&<>biioMPf7Oh?2PMLHGn`@`%z8$!_=PPWyQIDy&Q)~^8O&4^V{m)OuNKng z>RYj$%=GgZY^~9mMWf<3D&Xf}9n`I@0WTUzBtr4ce;24z%dhWE3mSPSPBwsg=@7dd zuK@g~zo^KTe7%A(P(evytle7^VO7_J`T4%}yKVw2@S?oleZ^%qU8s(C3VQ13(sC`LZm_(}Mt9UPGZ+QQ@^aWLpyd_JcnYQj~1 zq*1~^`D=_4pt`zRAytYkbh>*;B>=hdgdBt5DQ^j1?`~eo1!roL6#pG>CWNK~g1I)PT?e z+|o?DkX&`}F@=i2mB_^S1hc)Lnf>A9 znF0<>NR&jaVE)+{84|~~WF{^KArSaQ@w*Wyn4I2~Sp!3tT(U^~Lo!wfolq>;70J9K z+*2WwDt@uCw~MsZd91Cl;c^~$FtSpNS;?cZ;5|!@TA?Wu7sHT27ZiI-}T}=HivS{%AFC ze805TEOt%o#l2L85;!BQSeMO9*}p$vDaSdyiq?vks89;qvEemHz$(S<42g@2XTe}l z1Bmw?+4f|5J9bP6{mtM&XkTgWbTgur{u26df)XWlT|O?Ab>B0TkimYIsliT>P3fPn z+(mEo^b=q8g?;Es1I@&d7ev9w(c#KdMrPu+f0tn^Jj0SZ$}mA^Li%g}{5G33%b8KJ z^va(tdv{tbXlaTbVZKu1{%(t#N5p>IclTH}7KDwRVO{C!y8&XW%?Gzxr^Nrn=}8)C z-{Nl5x|+}HI4Rj_=>rL%W5A|BZ^QSz8DkHbfDH|=cn8aZVQ>-W!tt<$DWpmQfuuG9 zQJf2X)oU`1jZ~-K`V}+94D_ zEFd#>@C$y6Zxb0614mbBe&%GCBjKwHGz`bqeEI?iUqzF|Cy6u+XE2?^3gmzY(68)k zS*5phs??`tA)|%Q#O}GsYoO%TCTly-McZ{oWt4uh;K%=s4{T;&)8oR#cHYcWl4Ywo@1J`sU*c;5R<3;DRNZk9C{mn3%CyLZQa z<|JaT7$V8unqN40JGJbVC$Eb1`oOZhkJ4m7k(@-map@x%fA+^02v#L%R{se>XX5<(eorZaT?` zO*WPrAYa5##4qpiikCHUET=Frcw89axCWa%On9>2V|7)XF&z|waf8mm2pJLxoW`T= zKv$ma?MwNZPQU2B6jT9#k$w;Bq3_oj2^YO6)YU6pZIt- zl(@!pVA!77`uW9CpKGGRk6zeJ8BF~SL)Wi-xuM*^RY3zG`R@!#JYi|sJ}{Pn zO?Xxq763j3emCl<=CSK9vliMx!d8WfksZX4mP zpWj04=QV)?j$>cO@o8IZ+qzUV`okg+S+M zB{qz+a;(zu;kr61_;da9CsWqKlD;6Im*diVL_usp@_6eJ^~aBADyu>K;2_6XDd}lZ z4}n?9(<)PX{q{kUu&LR68XM;`0Ozv)C!JI}3$xlhv9jmq?5#xw+GhUlXt=sF+cubN zYV0K2fUDpn%INakL3ZsTe{i$V-D$f{{fs?*xOxQZn%9vj)xVOpTvI_H3Hmi=ofS z-YIip+;o*?iT5q@jBrwX_(U#KB%pr|`@DC@HDk-4h*-#;v^jT5u0k)VqL85*l(I6c zkFzKAA`kaXS+$ouF6Z0go4NSt9Y#0;f6%f$i@22%JWec#&n>i;K*cTBu=xR)DxZVC z^Km$?(_Y_X1h|~O8@x=sar3r0Hi9?ecUOuX=m_52*d8A#}fkz^zs0{CNtI1DuSoCSVw)qvjdG2Q}NQL&YX0$lw zR!=wT)cwz^g~je`*See(^Z0z;VBh-1!FO{mTmUS6-CBe20iNDq_@y0ts5aP}`Fds% RmwoDeooD)5=%=s4{|Bnd`GNod literal 0 HcmV?d00001 diff --git a/package-lock.json b/package-lock.json index 0c8890d..70388a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "bulma": "^1.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -5433,6 +5434,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/bulma": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.2.tgz", + "integrity": "sha512-D7GnDuF6seb6HkcnRMM9E739QpEY9chDzzeFrHMyEns/EXyDJuQ0XA0KxbBl/B2NTsKSoDomW61jFGFaAxhK5A==", + "license": "MIT" + }, "node_modules/bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", @@ -20600,6 +20607,11 @@ "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz", "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==" }, + "bulma": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.2.tgz", + "integrity": "sha512-D7GnDuF6seb6HkcnRMM9E739QpEY9chDzzeFrHMyEns/EXyDJuQ0XA0KxbBl/B2NTsKSoDomW61jFGFaAxhK5A==" + }, "bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", diff --git a/package.json b/package.json index cc266c4..2029f52 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "bulma": "^1.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/src/App.js b/src/App.js index 3784575..62958b8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,26 @@ -import logo from './logo.svg'; -import './App.css'; +import React from 'react'; +import Navbar from './components/Navbar.js'; +import "bulma/css/bulma.css"; +import './components/Navbar.css' +import FormField from './components/FormField'; +import SignupForm from './components/SignupForm'; +import CoolButton from './components/CoolButton'; +import Message from './components/Message'; function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+ + + + + Button 1 + Button 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi. +
); } -export default App; +export default App; \ No newline at end of file diff --git a/src/components/CoolButton.css b/src/components/CoolButton.css new file mode 100644 index 0000000..de2c4e1 --- /dev/null +++ b/src/components/CoolButton.css @@ -0,0 +1,16 @@ +/* src/components/CoolButton.css */ + .button { + border-radius: 4px; + padding: 8px 16px; + width: 150px; + height: 100px; + } + + .is-success { + background-color: #32d1b1; + color: white !important; + } + + .is-danger { + color: white !important; + } \ No newline at end of file diff --git a/src/components/CoolButton.js b/src/components/CoolButton.js new file mode 100644 index 0000000..83990d5 --- /dev/null +++ b/src/components/CoolButton.js @@ -0,0 +1,51 @@ +// src/components/CoolButton.js +import React from 'react'; +import './CoolButton.css'; + +const CoolButton = (props) => { + const bulmaClasses = { + isCentered: 'is-centered', + isActive: 'is-active', + isBlack: 'is-black', + isDanger: 'is-danger', + isDark: 'is-dark', + isFocused: 'is-focused', + isGrouped: 'is-grouped', + isHovered: 'is-hovered', + isInfo: 'is-info', + isInverted: 'is-inverted', + isLarge: 'is-large', + isLight: 'is-light', + isLink: 'is-link', + isLoading: 'is-loading', + isMedium: 'is-medium', + isOutlined: 'is-outlined', + isPrimary: 'is-primary', + isRight: 'is-right', + isRounded: 'is-rounded', + isSelected: 'is-selected', + isSmall: 'is-small', + isStatic: 'is-static', + isSuccess: 'is-success', + isText: 'is-text', + isWarning: 'is-warning', + isWhite: 'is-white', + }; + + const classNames = ['button']; + + // Loop through the props and map them to Bulma classes + Object.keys(props).forEach((prop) => { + if (bulmaClasses[prop]) { + classNames.push(bulmaClasses[prop]); + } + }); + + return ( + + ); +}; + +export default CoolButton; \ No newline at end of file diff --git a/src/components/FormField.css b/src/components/FormField.css new file mode 100644 index 0000000..afc16ba --- /dev/null +++ b/src/components/FormField.css @@ -0,0 +1,26 @@ +/* src/components/FormField.css */ + +.field { + margin-bottom: 1.5rem; + } + + .label { + font-weight: bold; + margin-bottom: 0.5rem; + margin-left: 50px; + margin-top: 25px; + } + + .control { + display: flex; + align-items: center; + } + + .input { + width: 500px; + padding: 0.5rem; + border: 1px solid #dbdbdb; + border-radius: 4px; + margin-left: 50px; + font-size: 1rem; + } \ No newline at end of file diff --git a/src/components/FormField.js b/src/components/FormField.js new file mode 100644 index 0000000..8141f0d --- /dev/null +++ b/src/components/FormField.js @@ -0,0 +1,16 @@ +// src/components/FormField.js +import React from 'react'; +import './FormField.css'; + +function FormField({ label, type, placeholder }) { + return ( +
+ +
+ +
+
+ ); +} + +export default FormField; \ No newline at end of file diff --git a/src/components/Message.css b/src/components/Message.css new file mode 100644 index 0000000..8318745 --- /dev/null +++ b/src/components/Message.css @@ -0,0 +1,67 @@ +.message { + width: 340px; + margin: 3rem auto; + } + + .message-header { + background-color: #f5f5f5; + border-bottom: 1px solid #dbdbdb; + padding: 0.75em 1em; + font-weight: 500; + } + + .message-body { + padding: 1.25em 1.5em; + border-top: 0; + border-radius: 0 0 4px 4px; + background-color: #f5f5f5; + color: #369cee; + } + + .message .delete { + background: none; + border: none; + font-size: 1rem; + cursor: pointer; + margin-left: auto; + } + + .message.is-info { + border: 1px solid #209cee; + } + + .message.is-info .message-header { + background-color: #209cee; + color: white; + } + + .message.is-info .message-body { + background-color: #edf6fc; + } + + .delete { + position: relative; + width: 20px; + height: 20px; + background-color: #337bb1 /* Circle color */ !important; + border-radius: 50%; /* Makes it a circle */ + cursor: pointer; + margin-left: auto; + } + + .delete::before, + .delete::after { + content: ""; + position: absolute; + width: 2px; + height: 10px; + background-color: var(--bulma-delete-color); + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotate(45deg); + transform-origin: center center; + } + + .delete::after { + transform: translate(-50%, -50%) rotate(-45deg); + } \ No newline at end of file diff --git a/src/components/Message.js b/src/components/Message.js new file mode 100644 index 0000000..448cf95 --- /dev/null +++ b/src/components/Message.js @@ -0,0 +1,35 @@ +import React from 'react'; +import './Message.css'; // Optional: if you have additional styling + +const Message = (props) => { + const bulmaClasses = { + isInfo: 'is-info', + isPrimary: 'is-primary', + isSuccess: 'is-success', + isWarning: 'is-warning', + isDanger: 'is-danger', + // Add more classes as needed + }; + + // Determine the message class based on the props + const messageClass = ['message']; + Object.keys(props).forEach((prop) => { + if (bulmaClasses[prop]) { + messageClass.push(bulmaClasses[prop]); + } + }); + + return ( +
+
+

{props.title}

+ +
+
+ {props.children} +
+
+ ); +}; + +export default Message; \ No newline at end of file diff --git a/src/components/Navbar.css b/src/components/Navbar.css new file mode 100644 index 0000000..c062f80 --- /dev/null +++ b/src/components/Navbar.css @@ -0,0 +1,69 @@ +svg { + width: 150px; + height: 80px; +} + +nav { + margin-top: 25px; + margin-left: 50px; + margin-right: 130px; + padding-left: 20px; + display: flex; + align-items: center; + height:65px; +} + +.navbar-brand { + display: flex; + align-items: center; +} + +.navbar-menu { + margin-left: 30px; /* Add space between SVG and "Home" text */ + display: flex; + align-items: center; + justify-content: flex-start; + } + +.navbar { + display: flex; + align-items: center; + background-color: #f5f5f5; +} + +.navbar-end { + display: flex; + align-items: center; + margin-left: 1300px; +} + +.button.log-in { + background-color: #54adf0; + color: white; + border: none; + border-radius: 5px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + } + + .button.log-in:hover { + background-color: #4791cc; + } + + .button.sign-up { + background-color: #32d1b1; + color: white; + border: none; + border-radius: 5px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + margin-left: 10px; + } + + .button.sign-up:hover { + background-color: #28b89a; + } diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..37324ad --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,32 @@ +import React from 'react'; +import CoolButton from './CoolButton'; + +function Navbar() { + return ( + + ); +} + +export default Navbar; \ No newline at end of file diff --git a/src/components/SignupForm.css b/src/components/SignupForm.css new file mode 100644 index 0000000..5a44e96 --- /dev/null +++ b/src/components/SignupForm.css @@ -0,0 +1,34 @@ +/* src/components/SignupForm.css */ + +.signup-form { + max-width: 700px; + margin: 50px auto; + padding: 2rem; + border: 1px solid #dbdbdb; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + .signup-form-title { + margin-left: 50px; + font-size: larger; + } + + .control { + margin-top: 1.5rem; + text-align: center; + } + + .button.is-primary { + background-color: #54adf0; + border-color: transparent; + margin-left: 50px; + color: white; + padding: 0.75rem 1.5rem; + font-size: 1rem; + border-radius: 4px; + } + + .navbar-brand { + font-weight: bold; + } \ No newline at end of file diff --git a/src/components/SignupForm.js b/src/components/SignupForm.js new file mode 100644 index 0000000..39b69b0 --- /dev/null +++ b/src/components/SignupForm.js @@ -0,0 +1,30 @@ +// src/components/SignupForm.js +import React from 'react'; +import FormField from './FormField'; +import './SignupForm.css'; + +function SignupForm() { + return ( +
+ + +
+
Sign Up Form:
+ + + +
+ +
+ +
+ ); +} + +export default SignupForm; \ No newline at end of file