mirror of
https://github.com/bubblecup-12/VogelSocialMedia.git
synced 2025-07-06 15:18:48 +00:00
new tests for mui
This commit is contained in:
luisa.bellitto
Rudi Regentonne
parent
da5b2a743f
commit
036b47e0fd
3 changed files with 295 additions and 0 deletions
84
code/frontend/src/Bio.tsx
Normal file
84
code/frontend/src/Bio.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import TextField from '@mui/material/TextField';
|
||||
|
||||
export default function MultilineTextFields() {
|
||||
return (
|
||||
<Box
|
||||
component="form"
|
||||
sx={{ '& .MuiTextField-root': { m: 1, width: '25ch' } }}
|
||||
noValidate
|
||||
autoComplete="off"
|
||||
>
|
||||
<div>
|
||||
<TextField
|
||||
id="outlined-multiline-flexible"
|
||||
label="Multiline"
|
||||
multiline
|
||||
maxRows={4}
|
||||
/>
|
||||
<TextField
|
||||
id="outlined-textarea"
|
||||
label="Multiline Placeholder"
|
||||
placeholder="Placeholder"
|
||||
multiline
|
||||
/>
|
||||
<TextField
|
||||
id="outlined-multiline-static"
|
||||
label="Multiline"
|
||||
multiline
|
||||
rows={4}
|
||||
defaultValue="Default Value"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<TextField
|
||||
id="filled-multiline-flexible"
|
||||
label="Multiline"
|
||||
multiline
|
||||
maxRows={4}
|
||||
variant="filled"
|
||||
/>
|
||||
<TextField
|
||||
id="filled-textarea"
|
||||
label="Multiline Placeholder"
|
||||
placeholder="Placeholder"
|
||||
multiline
|
||||
variant="filled"
|
||||
/>
|
||||
<TextField
|
||||
id="filled-multiline-static"
|
||||
label="Multiline"
|
||||
multiline
|
||||
rows={4}
|
||||
defaultValue="Default Value"
|
||||
variant="filled"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<TextField
|
||||
id="standard-multiline-flexible"
|
||||
label="Multiline"
|
||||
multiline
|
||||
maxRows={4}
|
||||
variant="standard"
|
||||
/>
|
||||
<TextField
|
||||
id="standard-textarea"
|
||||
label="Multiline Placeholder"
|
||||
placeholder="Placeholder"
|
||||
multiline
|
||||
variant="standard"
|
||||
/>
|
||||
<TextField
|
||||
id="standard-multiline-static"
|
||||
label="Multiline"
|
||||
multiline
|
||||
rows={4}
|
||||
defaultValue="Default Value"
|
||||
variant="standard"
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
210
code/frontend/src/Hashtags.tsx
Normal file
210
code/frontend/src/Hashtags.tsx
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
import * as React from "react";
|
||||
import Chip from "@mui/material/Chip";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Stack from "@mui/material/Stack";
|
||||
|
||||
export default function Tags() {
|
||||
return (
|
||||
<Stack spacing={3} sx={{ width: 500 }}>
|
||||
<Autocomplete
|
||||
multiple
|
||||
id="tags-standard"
|
||||
options={top100Films}
|
||||
getOptionLabel={(option) => option.title}
|
||||
defaultValue={[top100Films[13]]}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
variant="standard"
|
||||
label="Multiple values"
|
||||
placeholder="Favorites"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Autocomplete
|
||||
multiple
|
||||
id="tags-outlined"
|
||||
options={top100Films}
|
||||
getOptionLabel={(option) => option.title}
|
||||
defaultValue={[top100Films[13]]}
|
||||
filterSelectedOptions
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
onChange={(event) => {}}
|
||||
label="filterSelectedOptions"
|
||||
placeholder="Favorites"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Autocomplete
|
||||
multiple
|
||||
id="tags-filled"
|
||||
options={top100Films.map((option) => option.title)}
|
||||
defaultValue={[top100Films[13].title]}
|
||||
freeSolo
|
||||
renderValue={(value: readonly string[], getItemProps) =>
|
||||
value.map((option: string, index: number) => {
|
||||
const { key, ...itemProps } = getItemProps({ index });
|
||||
return (
|
||||
<Chip
|
||||
variant="outlined"
|
||||
label={option}
|
||||
key={key}
|
||||
{...itemProps}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
variant="filled"
|
||||
label="freeSolo"
|
||||
placeholder="Favorites"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Autocomplete
|
||||
multiple
|
||||
id="tags-readOnly"
|
||||
options={top100Films.map((option) => option.title)}
|
||||
defaultValue={[top100Films[12].title, top100Films[13].title]}
|
||||
readOnly
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label="readOnly" placeholder="Favorites" />
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
|
||||
const top100Films = [
|
||||
{ title: "The Shawshank Redemption", year: 1994 },
|
||||
{ title: "The Godfather", year: 1972 },
|
||||
{ title: "The Godfather: Part II", year: 1974 },
|
||||
{ title: "The Dark Knight", year: 2008 },
|
||||
{ title: "12 Angry Men", year: 1957 },
|
||||
{ title: "Schindler's List", year: 1993 },
|
||||
{ title: "Pulp Fiction", year: 1994 },
|
||||
{
|
||||
title: "The Lord of the Rings: The Return of the King",
|
||||
year: 2003,
|
||||
},
|
||||
{ title: "The Good, the Bad and the Ugly", year: 1966 },
|
||||
{ title: "Fight Club", year: 1999 },
|
||||
{
|
||||
title: "The Lord of the Rings: The Fellowship of the Ring",
|
||||
year: 2001,
|
||||
},
|
||||
{
|
||||
title: "Star Wars: Episode V - The Empire Strikes Back",
|
||||
year: 1980,
|
||||
},
|
||||
{ title: "Forrest Gump", year: 1994 },
|
||||
{ title: "Inception", year: 2010 },
|
||||
{
|
||||
title: "The Lord of the Rings: The Two Towers",
|
||||
year: 2002,
|
||||
},
|
||||
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
|
||||
{ title: "Goodfellas", year: 1990 },
|
||||
{ title: "The Matrix", year: 1999 },
|
||||
{ title: "Seven Samurai", year: 1954 },
|
||||
{
|
||||
title: "Star Wars: Episode IV - A New Hope",
|
||||
year: 1977,
|
||||
},
|
||||
{ title: "City of God", year: 2002 },
|
||||
{ title: "Se7en", year: 1995 },
|
||||
{ title: "The Silence of the Lambs", year: 1991 },
|
||||
{ title: "It's a Wonderful Life", year: 1946 },
|
||||
{ title: "Life Is Beautiful", year: 1997 },
|
||||
{ title: "The Usual Suspects", year: 1995 },
|
||||
{ title: "Léon: The Professional", year: 1994 },
|
||||
{ title: "Spirited Away", year: 2001 },
|
||||
{ title: "Saving Private Ryan", year: 1998 },
|
||||
{ title: "Once Upon a Time in the West", year: 1968 },
|
||||
{ title: "American History X", year: 1998 },
|
||||
{ title: "Interstellar", year: 2014 },
|
||||
{ title: "Casablanca", year: 1942 },
|
||||
{ title: "City Lights", year: 1931 },
|
||||
{ title: "Psycho", year: 1960 },
|
||||
{ title: "The Green Mile", year: 1999 },
|
||||
{ title: "The Intouchables", year: 2011 },
|
||||
{ title: "Modern Times", year: 1936 },
|
||||
{ title: "Raiders of the Lost Ark", year: 1981 },
|
||||
{ title: "Rear Window", year: 1954 },
|
||||
{ title: "The Pianist", year: 2002 },
|
||||
{ title: "The Departed", year: 2006 },
|
||||
{ title: "Terminator 2: Judgment Day", year: 1991 },
|
||||
{ title: "Back to the Future", year: 1985 },
|
||||
{ title: "Whiplash", year: 2014 },
|
||||
{ title: "Gladiator", year: 2000 },
|
||||
{ title: "Memento", year: 2000 },
|
||||
{ title: "The Prestige", year: 2006 },
|
||||
{ title: "The Lion King", year: 1994 },
|
||||
{ title: "Apocalypse Now", year: 1979 },
|
||||
{ title: "Alien", year: 1979 },
|
||||
{ title: "Sunset Boulevard", year: 1950 },
|
||||
{
|
||||
title:
|
||||
"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
|
||||
year: 1964,
|
||||
},
|
||||
{ title: "The Great Dictator", year: 1940 },
|
||||
{ title: "Cinema Paradiso", year: 1988 },
|
||||
{ title: "The Lives of Others", year: 2006 },
|
||||
{ title: "Grave of the Fireflies", year: 1988 },
|
||||
{ title: "Paths of Glory", year: 1957 },
|
||||
{ title: "Django Unchained", year: 2012 },
|
||||
{ title: "The Shining", year: 1980 },
|
||||
{ title: "WALL·E", year: 2008 },
|
||||
{ title: "American Beauty", year: 1999 },
|
||||
{ title: "The Dark Knight Rises", year: 2012 },
|
||||
{ title: "Princess Mononoke", year: 1997 },
|
||||
{ title: "Aliens", year: 1986 },
|
||||
{ title: "Oldboy", year: 2003 },
|
||||
{ title: "Once Upon a Time in America", year: 1984 },
|
||||
{ title: "Witness for the Prosecution", year: 1957 },
|
||||
{ title: "Das Boot", year: 1981 },
|
||||
{ title: "Citizen Kane", year: 1941 },
|
||||
{ title: "North by Northwest", year: 1959 },
|
||||
{ title: "Vertigo", year: 1958 },
|
||||
{
|
||||
title: "Star Wars: Episode VI - Return of the Jedi",
|
||||
year: 1983,
|
||||
},
|
||||
{ title: "Reservoir Dogs", year: 1992 },
|
||||
{ title: "Braveheart", year: 1995 },
|
||||
{ title: "M", year: 1931 },
|
||||
{ title: "Requiem for a Dream", year: 2000 },
|
||||
{ title: "Amélie", year: 2001 },
|
||||
{ title: "A Clockwork Orange", year: 1971 },
|
||||
{ title: "Like Stars on Earth", year: 2007 },
|
||||
{ title: "Taxi Driver", year: 1976 },
|
||||
{ title: "Lawrence of Arabia", year: 1962 },
|
||||
{ title: "Double Indemnity", year: 1944 },
|
||||
{
|
||||
title: "Eternal Sunshine of the Spotless Mind",
|
||||
year: 2004,
|
||||
},
|
||||
{ title: "Amadeus", year: 1984 },
|
||||
{ title: "To Kill a Mockingbird", year: 1962 },
|
||||
{ title: "Toy Story 3", year: 2010 },
|
||||
{ title: "Logan", year: 2017 },
|
||||
{ title: "Full Metal Jacket", year: 1987 },
|
||||
{ title: "Dangal", year: 2016 },
|
||||
{ title: "The Sting", year: 1973 },
|
||||
{ title: "2001: A Space Odyssey", year: 1968 },
|
||||
{ title: "Singin' in the Rain", year: 1952 },
|
||||
{ title: "Toy Story", year: 1995 },
|
||||
{ title: "Bicycle Thieves", year: 1948 },
|
||||
{ title: "The Kid", year: 1921 },
|
||||
{ title: "Inglourious Basterds", year: 2009 },
|
||||
{ title: "Snatch", year: 2000 },
|
||||
{ title: "3 Idiots", year: 2009 },
|
||||
{ title: "Monty Python and the Holy Grail", year: 1975 },
|
||||
];
|
||||
|
|
@ -4,6 +4,7 @@ import { useState } from "react";
|
|||
import Avatar from "@mui/material/Avatar";
|
||||
import QuiltedImageList from "./QuiltedImageList";
|
||||
import { deepOrange } from "@mui/material/colors";
|
||||
import Hashtags from "./Hashtags";
|
||||
|
||||
function Profile() {
|
||||
return (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue