1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7800],{69345:function(e,s,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/design-system/formexample",function(){return a(99025)}])},99025:function(e,s,a){"use strict";a.r(s);var l=a(85893),t=(a(67294),a(13494)),i=function(){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("h1",{className:"mb-2",children:"Form example"}),(0,l.jsx)("div",{className:"mb-10",children:(0,l.jsxs)("div",{className:"flex flex-col lg:flex-row gap-4",children:[(0,l.jsx)("div",{className:"flex-3 surface rounded-lg p-4 lg:p-8",children:(0,l.jsxs)("form",{action:"#",method:"POST",children:[(0,l.jsxs)("section",{className:"space-y-4",children:[(0,l.jsx)("h2",{className:"h4 mb-8",children:"Profile"}),(0,l.jsxs)("div",{className:"w-full flex flex-col lg:flex-row gap-4 items-stretch lg:items-center",children:[(0,l.jsxs)("div",{className:"flex-1 form-group",children:[(0,l.jsx)("label",{htmlFor:"user-name",children:"User name"}),(0,l.jsx)("input",{type:"text",name:"user-name",id:"user-name"})]}),(0,l.jsxs)("div",{className:"flex-1 form-group",children:[(0,l.jsx)("label",{htmlFor:"email",children:"Email"}),(0,l.jsxs)("div",{className:"input-group",children:[(0,l.jsx)("button",{className:"button button-sm button-ghost",children:(0,l.jsx)("span",{children:"Change"})}),(0,l.jsx)("input",{type:"password",name:"password",id:"password"})]})]})]}),(0,l.jsxs)("div",{className:"form-group form-select",children:[(0,l.jsx)("label",{htmlFor:"gender",children:"Gender"}),(0,l.jsxs)("select",{id:"gender",children:[(0,l.jsx)("option",{disabled:!0,selected:!0,children:"Choose an option"}),(0,l.jsx)("option",{children:"Male"}),(0,l.jsx)("option",{children:"Female"}),(0,l.jsx)("option",{children:"Not defined"})]})]}),(0,l.jsxs)("div",{className:"form-group",children:[(0,l.jsx)("label",{htmlFor:"about",children:"About"}),(0,l.jsx)("textarea",{id:"about",name:"about",rows:"3"}),(0,l.jsx)("p",{className:"text-ui-300 text-sm mt-1",children:"Brief description for your profile. URLs are hyperlinked."})]}),(0,l.jsxs)("div",{className:"rounded border border-ui-600 p-4 text-center text-sm text-ui-300",children:[(0,l.jsx)("span",{children:"G-LOOT ID:"}),(0,l.jsx)("code",{className:"font-bold font-body",children:"4769554309840896"})]}),(0,l.jsxs)("div",{className:"form-group",children:[(0,l.jsx)("label",{htmlFor:"avatar",children:"Avatar"}),(0,l.jsxs)("div",{className:"flex items-center gap-4",children:[(0,l.jsx)("div",{className:"avatar avatar-circle",children:(0,l.jsx)("div",{children:(0,l.jsx)("img",{src:"/images/prototype/DummyContent/teams/teamlogo_CrocEsports.png"})})}),(0,l.jsx)("button",{className:"button button-sm button-secondary",children:(0,l.jsx)("span",{children:"Change"})})]})]}),(0,l.jsxs)("div",{className:"form-group",children:[(0,l.jsx)("label",{children:"Cover photo"}),(0,l.jsx)("div",{className:"form-dropzone",children:(0,l.jsxs)("label",{htmlFor:"dropzone-file",children:[(0,l.jsxs)("div",{children:[(0,l.jsx)("span",{className:"icon text-4xl icon-image mb-4"}),(0,l.jsxs)("p",{className:"text-sm text-ui-200",children:[(0,l.jsx)("span",{className:"font-semibold",children:"Click to upload"})," or drag and drop"]}),(0,l.jsx)("p",{className:"text-sm",children:"SVG, PNG, JPG or GIF (MAX. 800x400px)"})]}),(0,l.jsx)("input",{id:"dropzone-file",type:"file"})]})})]})]}),(0,l.jsxs)("section",{className:"space-y-4",children:[(0,l.jsx)("h2",{className:"h4 mt-8",children:"Social"}),(0,l.jsxs)("div",{className:"form-group flex items-center gap-2",children:[(0,l.jsx)("label",{htmlFor:"social-twitter",className:"flex-1",children:"Twitter"}),(0,l.jsxs)("div",{className:"flex-3 input-group",children:[(0,l.jsx)("span",{className:"icon icon-logo-twitter"}),(0,l.jsx)("input",{type:"text",name:"social-twitter",id:"social-twitter"})]})]}),(0,l.jsxs)("div",{className:"form-group flex items-center gap-2",children:[(0,l.jsx)("label",{htmlFor:"social-twitch",className:"flex-1",children:"Twitch"}),(0,l.jsxs)("div",{className:"flex-3 input-group",children:[(0,l.jsx)("span",{className:"icon icon-twitch"}),(0,l.jsx)("input",{type:"text",name:"social-twitch",id:"social-twitch"})]})]}),(0,l.jsxs)("div",{className:"form-group flex items-center gap-2",children:[(0,l.jsx)("label",{htmlFor:"social-discord",className:"flex-1",children:"Discord"}),(0,l.jsxs)("div",{className:"flex-3 input-group",children:[(0,l.jsx)("span",{className:"icon icon-discord"}),(0,l.jsx)("button",{className:"button button-sm button-ghost",children:(0,l.jsx)("span",{children:"Connect"})}),(0,l.jsx)("input",{type:"text",name:"social-discord",id:"social-discord"})]})]}),(0,l.jsxs)("div",{className:"form-group flex items-center gap-2",children:[(0,l.jsx)("label",{htmlFor:"social-steam",className:"flex-1 -mt-4",children:"Steam"}),(0,l.jsxs)("div",{className:"flex-3",children:[(0,l.jsxs)("div",{className:"input-group",children:[(0,l.jsx)("span",{className:"icon icon-steam"}),(0,l.jsx)("button",{className:"button button-sm button-secondary",children:(0,l.jsx)("span",{children:"Login with steam"})}),(0,l.jsx)("input",{type:"text",name:"social-steam",id:"social-steam"})]}),(0,l.jsx)("p",{className:"text-ui-300 text-sm mt-1",children:"This site is not associated with Valve Corp."})]})]})]}),(0,l.jsxs)("section",{className:"space-y-4",children:[(0,l.jsx)("h2",{className:"h4 mt-8",children:"Data Privacy"}),(0,l.jsxs)("p",{className:"text-sm text-ui-200",children:["To make G-Loot better we collect information from you as visitor with help from cookies. We also conduct relevant marketing of G-Loot\u2018s services within Meta, Google, Adroll, Snapchat and Bing\u2018s network. Read more in our ",(0,l.jsx)("a",{href:"#",target:"_blank",children:"Privacy Policy"}),". ",(0,l.jsx)("br",{}),"Here you can consent to share your data with the following partners:"]}),(0,l.jsxs)("div",{className:"form-group",children:[(0,l.jsxs)("div",{className:"form-toggle",children:[(0,l.jsx)("input",{type:"checkbox",name:"data-meta",id:"data-meta"}),(0,l.jsx)("label",{htmlFor:"data-meta",children:"Meta"})]}),(0,l.jsxs)("div",{className:"form-toggle",children:[(0,l.jsx)("input",{type:"checkbox",name:"data-google",id:"data-google",defaultChecked:!0}),(0,l.jsx)("label",{htmlFor:"data-google",children:"Google"})]}),(0,l.jsxs)("div",{className:"form-toggle",children:[(0,l.jsx)("input",{type:"checkbox",name:"data-adroll",id:"data-adroll",defaultChecked:!0}),(0,l.jsx)("label",{htmlFor:"data-adroll",children:"Adroll"})]}),(0,l.jsxs)("div",{className:"form-toggle",children:[(0,l.jsx)("input",{type:"checkbox",name:"data-bing",id:"data-bing"}),(0,l.jsx)("label",{htmlFor:"data-bing",children:"Bing"})]}),(0,l.jsxs)("div",{className:"form-toggle",children:[(0,l.jsx)("input",{type:"checkbox",name:"data-quantcast",id:"data-quantcast"}),(0,l.jsx)("label",{htmlFor:"data-quantcast",children:"Quantcast"})]})]})]}),(0,l.jsxs)("section",{className:"mt-4 lg:mt-8 pt-4 lg:pt-8 border-t border-ui-600 flex gap-4",children:[(0,l.jsx)("button",{type:"cancel",className:"flex-1 button button-primary",children:(0,l.jsx)("span",{children:"Save"})}),(0,l.jsx)("button",{type:"submit",className:"flex-1 button button-secondary",children:(0,l.jsx)("span",{children:"Reset"})})]})]})}),(0,l.jsx)("div",{className:"flex-2",children:(0,l.jsx)("iframe",{className:"rounded-lg",width:"100%",height:"800",src:"//jsfiddle.net/augustin_hiebel/mz3vr67f/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})]})};i.getLayout=t.G,s.default=i}},function(e){e.O(0,[1664,5797,3494,9774,2888,179],(function(){return s=69345,e(e.s=s);var s}));var s=e.O();_N_E=s}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.